function MainComponent() { const [generatedWebsite, setGeneratedWebsite] = React.useState(null); const handleGenerateWebsite = async (event)=>{ event.preventDefault(); const { theme, layout, content, colorScheme } = event.target.elements; try { const response = await fetch("YOUR_NLP_API_ENDPOINT", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ theme: theme.value, layout: layout.value, content: content.value, colorScheme: colorScheme.value }) }); const data = await response.json(); setGeneratedWebsite(data.website); } catch (error) { console.error("Error generating website:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-4 bg-gray-50 font-roboto text-gray-900", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-4 bg-[#010101] text-white", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "AI Website Generator"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center py-8", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold py-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Generate Your Own Website"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleGenerateWebsite, className: "w-full max-w-md bg-white p-6 rounded-lg shadow-md space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "theme", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Theme"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "theme", name: "theme", className: "w-full p-2 border border-gray-300 rounded", placeholder: "e.g., Portfolio, Blog", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "layout", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Layout"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "layout", name: "layout", className: "w-full p-2 border border-gray-300 rounded", placeholder: "e.g., Single Column, Grid", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "content", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Content"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "content", name: "content", className: "w-full p-2 border border-gray-300 rounded", placeholder: "e.g., Text, Images, Videos", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "colorScheme", className: "block text-lg font-medium", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Color Scheme"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "colorScheme", name: "colorScheme", className: "w-full p-2 border border-gray-300 rounded", placeholder: "e.g., Light, Dark", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-[#010101] text-white rounded hover:bg-gray-800", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Generate Website")), generatedWebsite && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-8 p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold pb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Generated Website"), /*#__PURE__*/ React.createElement("iframe", { src: generatedWebsite, className: "w-full h-[400px]", title: "Generated Website", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: generatedWebsite, className: "mt-4 inline-block text-blue-500 underline", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "View Website"))), /*#__PURE__*/ React.createElement("footer", { className: "flex justify-between items-center p-4 bg-[#010101] text-white mt-auto", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, "© 2023 AI Website Generator"), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:text-gray-400", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }))))); }