function MainComponent() { const [showModal, setShowModal] = React.useState(false); const [modalContent, setModalContent] = React.useState(null); const [files, setFiles] = React.useState([]); const [title, setTitle] = React.useState(''); const [dateTaken, setDateTaken] = React.useState(''); const handleDragOver = (e)=>{ e.preventDefault(); }; const handleDrop = (e)=>{ e.preventDefault(); const uploadedFiles = [ ...e.dataTransfer.files ].map((file)=>{ const reader = new FileReader(); reader.onload = function(e) { setFiles((prevFiles)=>[ ...prevFiles, { src: e.target.result, type: file.type.startsWith('video') ? 'video' : 'image', title, date: dateTaken } ]); }; reader.readAsDataURL(file); return file; }); }; const handleMediaClick = (mediaType, src)=>{ setModalContent({ mediaType, src }); setShowModal(true); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] overflow-hidden relative", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#3b5998] p-4 text-white font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "動画&画像管理サイト")), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, "ファイルをアップロード"), /*#__PURE__*/ React.createElement("div", { className: "border-dashed border-4 border-[#d1d5db] p-4 flex flex-col items-center justify-center", onDragOver: handleDragOver, onDrop: handleDrop, __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "作品名", className: "border border-solid border-[#d1d5db] rounded p-2 text-sm bg-white cursor-pointer mb-2", onChange: (e)=>setTitle(e.target.value), name: "title", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "date", className: "border border-solid border-[#d1d5db] rounded p-2 text-sm bg-white cursor-pointer mb-2", onChange: (e)=>setDateTaken(e.target.value), name: "dateTaken", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "ここにファイルをドラッグ＆ドロップ"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "アップロード済みのメディア"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, files.map((file, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white shadow-md rounded-lg p-4 cursor-pointer", onClick: ()=>handleMediaClick(file.type, file.src), __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, file.type === 'video' ? /*#__PURE__*/ React.createElement("video", { controls: true, className: "w-full mb-2 max-h-[100px]", preload: "metadata", __source: { fileName: "", lineNumber: 50, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: file.src, type: "video/mp4", __source: { fileName: "", lineNumber: 51, columnNumber: 23 }, __self: this })) : /*#__PURE__*/ React.createElement("img", { src: file.src, alt: `${file.title} thumbnail`, className: "w-full mb-2 max-h-[100px]", __source: { fileName: "", lineNumber: 54, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, file.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, file.date)))))), showModal && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, modalContent.mediaType === 'video' ? /*#__PURE__*/ React.createElement("video", { controls: true, className: "max-w-md max-h-full", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: modalContent.src, type: "video/mp4", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this })) : /*#__PURE__*/ React.createElement("img", { src: modalContent.src, alt: "Modal Content", className: "max-w-md max-h-full", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(false), className: "mt-4 bg-red-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "閉じる"))))); }