function MainComponent() { const [images, setImages] = useState([]); const [selectedImage, setSelectedImage] = useState(null); useEffect(()=>{ const fetchImages = async ()=>{ const response = await fetch("/api/db/aibizonephoto", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `images` ORDER BY `created_at` DESC", values: [] }) }); const data = await response.json(); setImages(data); }; fetchImages(); }, []); const handleContextMenu = (e)=>{ e.preventDefault(); return false; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", onContextMenu: handleContextMenu, __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#212529] py-4 px-6 flex items-center justify-between fixed w-full top-0 z-50", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/775b9297-513d-444c-b1a0-f399ac950e04/-/format/auto/", alt: "", className: "h-8 mr-4", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-[#ffffff] text-2xl font-bold font-roboto tracking-wide", style: { WebkitTextOrientation: "mixed", textOrientation: "mixed", writingMode: "horizontal-tb" }, translate: "no", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "A"), /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "I"), /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "B"), /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "i"), /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "z"), /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "o"), /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "n"), /*#__PURE__*/ React.createElement("span", { style: { WebkitFontSmoothing: "antialiased", MozOsxFontSmoothing: "grayscale" }, __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "e"))), /*#__PURE__*/ React.createElement("a", { href: "https://aibizone.github.io/AIBizone-page/", className: "relative text-[#ffffff] hover:text-[#ffffff] group px-4 py-2", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "トップページ"), /*#__PURE__*/ React.createElement("span", { className: "absolute bottom-0 left-0 w-0 h-0.5 bg-yellow-400 transition-all duration-300 group-hover:w-full", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8 mt-16", __source: { fileName: "", lineNumber: 118, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, images.map((image)=>/*#__PURE__*/ React.createElement("div", { key: image.id, className: "relative group aspect-square bg-white rounded-lg shadow-md overflow-hidden", onClick: ()=>setSelectedImage(image), __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.filename, alt: `AI生成画像 ${image.id}`, className: "w-full h-full object-cover select-none", draggable: "false", style: { userSelect: "none", WebkitUserSelect: "none" }, __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this })))), selectedImage && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50", onClick: ()=>setSelectedImage(null), __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[90%] h-[90%] max-w-[1200px] max-h-[800px] flex items-center justify-center", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: selectedImage.filename, alt: `AI生成画像 ${selectedImage.id}`, className: "max-w-full max-h-full object-contain select-none", draggable: "false", style: { userSelect: "none", WebkitUserSelect: "none" }, __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute top-4 right-4 text-white text-2xl", onClick: ()=>setSelectedImage(null), __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this })))))); }