function MainComponent() { const [selectedFiles, setSelectedFiles] = React.useState([]); const [submitted, setSubmitted] = React.useState(false); const handleFileChange = (event)=>{ setSelectedFiles(Array.from(event.target.files)); }; const handleSubmit = (event)=>{ event.preventDefault(); // Here you would usually have the code to send the selectedFiles to your API. // For demonstration purposes, the files just get logged to the console. console.log(selectedFiles); setSubmitted(true); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "productName", className: "block font-roboto text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Product Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "productName", id: "productName", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm font-roboto", required: true, __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("fieldset", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("legend", { className: "font-roboto text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 space-y-2", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "gender", id: "male", value: "male", className: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300", required: true, __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "male", className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, "Male")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "gender", id: "female", value: "female", className: "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300", required: true, __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "female", className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "Female")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "size", className: "block font-roboto text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Size"), /*#__PURE__*/ React.createElement("select", { name: "size", id: "size", className: "mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm font-roboto", required: true, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "S"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "M"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "L"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "XL"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "productImages", className: "block font-roboto text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Product Images"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "productImages", id: "productImages", multiple: true, className: "mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100", onChange: handleFileChange, required: true, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, selectedFiles.map((file, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: URL.createObjectURL(file), alt: `product preview ${index + 1}`, className: "w-full h-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Submit")), submitted && /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto text-green-600", __source: { fileName: "", lineNumber: 64, columnNumber: 21 }, __self: this }, "Product created successfully!")); }