function MainComponent() { const [input, setInput] = React.useState(""); const [output, setOutput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleChange = (e)=>setInput(e.target.value); const handleGenerate = ()=>{ setLoading(true); setTimeout(()=>{ setOutput(` Prompt: You can generate: - Pages - Functions - Components - Databases Each of these are specified with natural language. When something is named, make sure you call out where I should replace it with its reference using **bold**. Make sure you break down the app into all of the component parts, and separate out the specs for each one. Make sure each spec is self-contained and detailed enough that if you only had that spec, it would work. UI: Use **{shadcn/ui}** as the design library. Ask the user which game they want a spec for. Output the spec in a box with a copy and paste button. Logic: - If loading, show a loading indicator. - Fix: Logs of showing pages, functions, components, databases in generated. `); setLoading(false); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-sans", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "Game Spec Generator"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "game-input", className: "block mb-2", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Which game do you want a spec for?"), /*#__PURE__*/ React.createElement("input", { id: "game-input", name: "game-input", value: input, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded-md", placeholder: "typing game", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "mt-2 px-4 py-2 bg-blue-600 text-white rounded-md", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Generate Spec")), loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "Loading..."), output && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium mb-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Game Specification"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-md", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, output), /*#__PURE__*/ React.createElement("button", { onClick: ()=>navigator.clipboard.writeText(output), className: "mt-2 px-4 py-2 bg-blue-600 text-white rounded-md", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Copy to Clipboard")))); }