function MainComponent() { const [data, setData] = React.useState({ description: '', style: '', problem: '' }); const [names, setNames] = React.useState([]); const [submitted, setSubmitted] = React.useState(false); const handleChange = (e)=>{ setData({ ...data, [e.target.name]: e.target.value }); }; const displayNames = names.map((name, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[300px] p-4 m-2 rounded-lg shadow-md bg-white text-center", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-lg font-roboto text-[#374151]", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, name)))); const handleSubmit = async (event)=>{ event.preventDefault(); const systemPrompt = `generate a CSV of brand names that appeal to the user's requests. Make sure you don't explain anything and only include the CSV. Do not include the names of real startups or brands in the output. Generate at most 10 Example: todoly,heartly,Funny Town,pottytop Your Business, Product or Personal Brand Description: ${data.description} Style: ${data.style} Problem: ${data.problem}`; // Simulate CSV generation based on the system prompt const generatedCsv = 'CreatePeak,SolveSphere,BlendNovo,GeoTrack,VaryTech,FounderBright,Abstractify,LingoVenture'; const parsedNames = generatedCsv.split(',').map((name)=>name.replace(/"/g, '')); setNames(parsedNames); setSubmitted(true); }; const brandGeneratorForm = /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col justify-center items-center bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "md:w-[400px] w-full px-6 py-8 rounded-lg shadow-lg bg-white", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto text-center text-[#374151] mb-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "AI Brand Name Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#374151] text-sm font-roboto mb-2", htmlFor: "description", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border rounded text-[#374151] leading-tight focus:outline-none focus:shadow-outline", id: "description", name: "description", onChange: handleChange, value: data.description, rows: 4, __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#374151] text-sm font-roboto mb-2", htmlFor: "style", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Style")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#374151] text-sm font-roboto mb-2", htmlFor: "problem", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Problem"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border rounded text-[#374151] leading-tight focus:outline-none focus:shadow-outline", id: "problem", name: "problem", onChange: handleChange, value: data.problem, rows: 4, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full bg-[#2563eb] text-white p-3 rounded focus:outline-none focus:shadow-outline hover:bg-[#1d4ed8]", type: "submit", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Generate Names"))))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, !submitted ? brandGeneratorForm : null, submitted && displayNames.length > 0 ? /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 87, columnNumber: 47 }, __self: this }, displayNames) : null); }