function MainComponent() { const [files, setFiles] = React.useState([]); const handleDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); setFiles([ ...files, ...e.dataTransfer.files ]); }; const fileElements = files.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] mx-auto p-6 bg-white shadow-lg rounded-lg mb-4 overflow-auto h-[150px]", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, files.map((file, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-1 truncate", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, file.name)))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row min-h-screen bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col justify-center items-center p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] p-6 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center flex-wrap mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-[100px] h-[100px] mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/high-res-whatsapp@3x.png", alt: "Zoomed-in WhatsApp icon", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-[100px] h-[100px] mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/high-res-facebook@3x.png", alt: "Zoomed-in Facebook icon", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-[100px] h-[100px] mb-2", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/high-res-instagram@3x.png", alt: "Zoomed-in Instagram icon", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-[100px] h-[100px] mb-2", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/high-res-youtube@3x.png", alt: "Zoomed-in YouTube icon", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-[100px] h-[100px] mb-2", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/high-res-tiktok@3x.png", alt: "Zoomed-in TikTok icon", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { onDrop: handleDrop, onDragOver: (e)=>{ e.preventDefault(); e.stopPropagation(); }, onDragEnter: (e)=>{ e.preventDefault(); e.stopPropagation(); }, onDragLeave: (e)=>{ e.preventDefault(); e.stopPropagation(); }, className: "block w-full mb-3 p-2 border border-gray-300 rounded-md font-roboto text-center", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "اسحب الملفات هنا انقر أو للتحميل"), fileElements))); }