function ImageUploadForDiscord({ name, className, ...props }) { return /*#__PURE__*/ React.createElement("input", { type: "file", className: `border p-2 ${className}`, name: name, ...props, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ImageUploadForDiscordStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadForDiscord, { name: "image", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [images, setImages] = React.useState([]); const handleUpload = (event)=>{ event.preventDefault(); const fileInput = event.target.elements.image; if (fileInput.files.length > 0) { const newImage = URL.createObjectURL(fileInput.files[0]); setImages([ newImage, ...images ]); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#7289da] text-white py-4 flex justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, "Discord Image Host")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center w-full mt-10", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8 w-[400px]", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "Upload an Image"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleUpload, __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(ImageUploadForDiscord, { name: "image", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#7289da] text-white py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, "Upload")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Recent Uploads"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Uploaded image ${index + 1}`, className: "w-full h-[100px] object-cover", __source: { fileName: "", lineNumber: 29, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("footer", { className: "w-full bg-[#7289da] text-white py-4 mt-auto flex justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "© 2023 Discord Image Host"))); }