function MainComponent({ title, namePlaceholder, descriptionPlaceholder, characterPromptPlaceholder, firstMessagePlaceholder, createButtonText }) { const [name, setName] = useState(''); const [description, setDescription] = useState(''); const [characterPrompt, setCharacterPrompt] = useState(''); const [firstMessage, setFirstMessage] = useState(''); const [file, setFile] = useState(null); const [imageUrl, setImageUrl] = useState(''); const handleSubmit = (event)=>{ event.preventDefault(); }; const handleFileChange = (event)=>{ const file = event.target.files[0]; setFile(file); if (file) { const reader = new FileReader(); reader.onload = (e)=>{ setImageUrl(e.target.result); }; reader.readAsDataURL(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-[#1F1F1F] w-2/3 p-8 flex flex-col", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "text-white block", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { id: "name", name: "name", type: "text", placeholder: namePlaceholder, value: name, onChange: (e)=>setName(e.target.value), className: "w-full p-2 rounded bg-[#262626] text-white", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "description", className: "text-white block", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { id: "description", name: "description", rows: 3, placeholder: descriptionPlaceholder, value: description, onChange: (e)=>setDescription(e.target.value), className: "w-full p-2 rounded bg-[#262626] text-white", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "characterPrompt", className: "text-white block", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Character Prompt"), /*#__PURE__*/ React.createElement("input", { id: "characterPrompt", name: "characterPrompt", type: "text", placeholder: characterPromptPlaceholder, value: characterPrompt, onChange: (e)=>setCharacterPrompt(e.target.value), className: "w-full p-2 rounded bg-[#262626] text-white", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "firstMessage", className: "text-white block", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "First Message"), /*#__PURE__*/ React.createElement("input", { id: "firstMessage", name: "firstMessage", type: "text", placeholder: firstMessagePlaceholder, value: firstMessage, onChange: (e)=>setFirstMessage(e.target.value), className: "w-full p-2 rounded bg-[#262626] text-white", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file", className: "text-white block", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "Upload Photo"), /*#__PURE__*/ React.createElement("input", { id: "file", name: "file", type: "file", onChange: handleFileChange, accept: "image/*", className: "w-full p-2 rounded bg-[#262626] text-white", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 rounded bg-[#0F0F0F] text-white", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, createButtonText)), /*#__PURE__*/ React.createElement("div", { className: "w-1/3 p-8 bg-[#262626] overflow-auto", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Uploaded profile of ${name || 'character'}`, className: "w-full h-auto mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 24 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto font-semibold text-white mb-2", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, description), /*#__PURE__*/ React.createElement("p", { className: "text-white mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, characterPrompt), /*#__PURE__*/ React.createElement("p", { className: "text-white", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, firstMessage)))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Create Your Character", namePlaceholder: "Enter character name", descriptionPlaceholder: "Describe the character's personality", characterPromptPlaceholder: "What brings your character to life?", firstMessagePlaceholder: "What's your character's opening line?", createButtonText: "Create Character", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this })); }