function ImageTitleLabel({ label, htmlFor }) { return /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", htmlFor: htmlFor, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function ImageTitleLabelStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Image Title", htmlFor: "image-title", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [images, setImages] = React.useState([]); const [themeName, setThemeName] = React.useState(''); const [subthemeName, setSubthemeName] = React.useState(''); const [metadata, setMetadata] = React.useState({ imageTitle: '', imageDescription: '', tags: [] }); const [folders, setFolders] = React.useState({}); const [currentFolder, setCurrentFolder] = React.useState(''); const [tag, setTag] = React.useState(''); const handleImageUpload = (e)=>{ setImages([ ...images, ...e.target.files ]); }; const handleThemeChange = (e)=>{ setThemeName(e.target.value); }; const handleSubthemeChange = (e)=>{ setSubthemeName(e.target.value); }; const handleMetadataChange = (e)=>{ setMetadata({ ...metadata, [e.target.name]: e.target.value }); }; const handleFolderChange = (e)=>{ setCurrentFolder(e.target.value); }; const handleCreateFolder = ()=>{ setFolders({ ...folders, [themeName]: [ ...folders[themeName] || [], subthemeName ] }); setThemeName(''); setSubthemeName(''); }; const handleDeleteFolder = (theme, subtheme)=>{ const updatedFolders = { ...folders }; updatedFolders[theme] = updatedFolders[theme].filter((st)=>st !== subtheme); if (updatedFolders[theme].length === 0) delete updatedFolders[theme]; setFolders(updatedFolders); }; const handleAddTag = ()=>{ setMetadata({ ...metadata, tags: [ ...metadata.tags, tag ] }); setTag(''); }; const handleRemoveTag = (tagToRemove)=>{ setMetadata({ ...metadata, tags: metadata.tags.filter((t)=>t !== tagToRemove) }); }; const handleSubmit = ()=>{ console.log({ images, themeName, subthemeName, metadata, currentFolder }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto bg-[#f4f4f4] min-h-screen", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[800px] mx-auto bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Image Upload and Management"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Upload Images", htmlFor: "file-upload", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "file-upload", className: "w-full p-3 border border-gray-300 rounded-lg", multiple: true, onChange: handleImageUpload, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Theme Name", htmlFor: "theme-name", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "theme-name", className: "w-full p-3 border border-gray-300 rounded-lg", value: themeName, onChange: handleThemeChange, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Subtheme Name", htmlFor: "subtheme-name", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "subtheme-name", className: "w-full p-3 border border-gray-300 rounded-lg", value: subthemeName, onChange: handleSubthemeChange, __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "mb-6 w-full bg-green-600 text-white p-3 rounded-lg", onClick: handleCreateFolder, __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Create Folder"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Current Folders"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, Object.keys(folders).map((theme)=>folders[theme].map((subtheme, index)=>/*#__PURE__*/ React.createElement("li", { key: `${theme}-${subtheme}-${index}`, className: "mb-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 105, columnNumber: 19 }, __self: this }, theme, " / ", subtheme), /*#__PURE__*/ React.createElement("button", { className: "ml-4 bg-red-600 text-white p-2 rounded-lg", onClick: ()=>handleDeleteFolder(theme, subtheme), __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, "Delete")))))), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Current Folder", htmlFor: "current-folder", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "current-folder", className: "w-full p-3 border border-gray-300 rounded-lg", value: currentFolder, onChange: handleFolderChange, __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Select Folder"), Object.keys(folders).map((theme)=>folders[theme].map((subtheme, index)=>/*#__PURE__*/ React.createElement("option", { key: `${theme}-${subtheme}-${index}`, value: `${theme}/${subtheme}`, __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, theme, "/", subtheme))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this }, "Metadata"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Image Title", htmlFor: "image-title", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "imageTitle", className: "w-full p-3 border border-gray-300 rounded-lg", value: metadata.imageTitle, onChange: handleMetadataChange, __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Image Description", htmlFor: "image-description", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "imageDescription", className: "w-full p-3 border border-gray-300 rounded-lg h-24", value: metadata.imageDescription, onChange: handleMetadataChange, __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTitleLabel, { label: "Tags", htmlFor: "tag", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "tag", className: "w-full p-3 border border-gray-300 rounded-lg", value: tag, onChange: (e)=>setTag(e.target.value), __source: { fileName: "", lineNumber: 159, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-4 bg-blue-600 text-white p-3 rounded-lg", onClick: handleAddTag, __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "Add Tag")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap space-x-2", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, metadata.tags.map((t, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "bg-gray-200 p-2 rounded-lg flex items-center mb-2", __source: { fileName: "", lineNumber: 172, columnNumber: 17 }, __self: this }, t, /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-red-600 text-white p-1 rounded-full", onClick: ()=>handleRemoveTag(t), __source: { fileName: "", lineNumber: 177, columnNumber: 19 }, __self: this }, "✕")))))), /*#__PURE__*/ React.createElement("button", { className: "mt-4 w-full bg-blue-600 text-white p-3 rounded-lg", onClick: handleSubmit, __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, "Submit"))); }