Lead Card - Copy this React, Tailwind Component to your project

import React, { useState, useEffect, useCallback } from "react"; import Editor from "@monaco-editor/react"; import Button from "../ui/Button"; import { Card, CardContent } from "../ui/Card"; import { Moon, Sun } from "lucide-react"; import { motion } from "framer-motion"; import { Inspector } from "react-inspector"; // import Parser from "web-tree-sitter"; const Home = () => { const [code, setCode] = useState(`#include <stdio.h> int main() { printf("Hello, World!\\n"); return 0; }`); const [theme, setTheme] = useState("dark"); const [output, setOutput] = useState(""); const [ast, setAst] = useState(null); const [astError, setAstError] = useState(null); const generateAST = useCallback(async () => { try { const Parser = (await import("web-tree-sitter")).default; // ✅ Fix: Dynamic Import await Parser.init(); const parser = new Parser(); const Lang = await Parser.Language.load("/tree-sitter-c.wasm"); // Ensure file is in `public/` parser.setLanguage(Lang); const tree = parser.parse(code); setAst(tree.rootNode.toJSON()); setAstError(null); } catch (error) { console.error("AST Parsing Error:", error); setAst(null); setAstError("Failed to parse code. Syntax error detected."); } }, [code]); useEffect(() => { generateAST(); }, [generateAST]); const handleCompile = () => { setOutput("Compilation output will be displayed here."); }; return ( <div className={`min-h-screen p-8 transition-all duration-300 ${theme === "dark" ? "bg-gray-900 text-white" : "bg-white text-black"}`}> <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} className="flex justify-between items-center mb-10" > <h1 className="text-4xl font-extrabold text-blue-400 tracking-wide drop-shadow-lg">C Compiler</h1> <Button onClick={() => setTheme(theme === "light" ? "dark" : "light")} className="p-3 rounded-lg bg-gray-200 dark:bg-gray-800 hover:scale-110 transition-transform shadow-xl"> {theme === "light" ? <Moon size={26} /> : <Sun size={26} />} </Button> </motion.div> {/* Code Editor */} <Card className="mb-10 shadow-2xl border border-gray-700 rounded-2xl p-4 bg-gray-900"> <CardContent> <Editor height="400px" defaultLanguage="c" theme={theme === "dark" ? "vs-dark" : "light"} value={code} onChange={(value) => setCode(value || "")} options={{ fontSize: 14, minimap: { enabled: false }, scrollBeyondLastLine: false, }} /> </CardContent> </Card> {/* Compile Button */} <div className="flex justify-center"> <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="mb-10 w-1/3"> <Button className="w-full py-3 text-lg bg-gradient-to-r from-blue-500 to-blue-700 text-white rounded-xl hover:bg-blue-600 transition shadow-xl" onClick={handleCompile}> Compile </Button> </motion.div> </div> {/* Compilation Output */} <Card className="shadow-2xl border border-gray-700 rounded-2xl p-6 bg-gray-900"> <CardContent> <pre className="whitespace-pre-wrap text-blue-300 text-lg font-mono leading-relaxed p-2 rounded bg-gray-800 shadow-inner">{output}</pre> </CardContent> </Card> {/* AST Visualization */} <Card className="shadow-2xl border border-gray-700 rounded-2xl p-6 mt-6 bg-gray-900"> <CardContent> <h2 className="text-xl font-bold mb-4 text-blue-400">AST Visualization</h2> {astError ? ( <p className="text-red-400 font-semibold">{astError}</p> ) : ( ast && <Inspector data={ast} theme="chromeDark" /> )} </CardContent> </Card> </div> ); }; export default Home;