function MainComponent() { const [selectedImages, setSelectedImages] = React.useState([]); const [imageDirectory, setImageDirectory] = React.useState("/nas"); const [sortOrder, setSortOrder] = React.useState("date"); const [zoomLevel, setZoomLevel] = React.useState(100); const [columnsCount, setColumnsCount] = React.useState(3); const [images, setImages] = React.useState([]); React.useEffect(()=>{ const fetchImages = async (directory)=>{ try { const response = await fetch(`/api/images?directory=${encodeURIComponent(directory)}`); const data = await response.json(); return data.map((img)=>({ src: img.path, alt: img.name, date: img.modifiedDate, name: img.name, properties: img.properties })); } catch (error) { console.error("Failed to fetch images:", error); return []; } }; fetchImages(imageDirectory).then(setImages); }, [ imageDirectory ]); const sortedImages = React.useMemo(()=>{ return [ ...images ].sort((a, b)=>{ if (sortOrder === "date") { return new Date(b.date) - new Date(a.date); } return a.name.localeCompare(b.name); }); }, [ images, sortOrder ]); const toggleSelect = (src)=>{ setSelectedImages((prev)=>{ if (prev.includes(src)) { return prev.filter((image)=>image !== src); } if (prev.length >= 2) { return [ prev[1], src ]; } return [ ...prev, src ]; }); }; const containerStyles = { width: `${zoomLevel}%`, maxWidth: `${100 / columnsCount}%` }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 bg-gray-50", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Image Gallery Explorer"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 text-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Efficiently browse and compare your NAS images with advanced sorting and visualization tools")), /*#__PURE__*/ React.createElement("div", { className: "mb-6 space-y-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/2", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "imageDirectory", value: imageDirectory, onChange: (e)=>setImageDirectory(e.target.value), className: "w-full p-3 border rounded-lg shadow-sm", placeholder: "NASディレクトリパスを入力", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center gap-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "sortOrder", value: sortOrder, onChange: (e)=>setSortOrder(e.target.value), className: "p-3 border rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "date", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "日付順"), /*#__PURE__*/ React.createElement("option", { value: "name", __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "名前順")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "列数:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "columnsCount", min: "1", max: "12", value: columnsCount, onChange: (e)=>setColumnsCount(Number(e.target.value)), className: "w-20 p-3 border rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "拡大率:"), /*#__PURE__*/ React.createElement("input", { type: "range", name: "zoomLevel", min: "50", max: "150", value: zoomLevel, onChange: (e)=>setZoomLevel(e.target.value), className: "w-32", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, zoomLevel, "%"))))), /*#__PURE__*/ React.createElement("div", { className: `grid gap-4`, style: { gridTemplateColumns: `repeat(${columnsCount}, 1fr)` }, __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, sortedImages.map((image, index)=>{ const isSelected = selectedImages.includes(image.src); return /*#__PURE__*/ React.createElement("div", { key: index, className: `relative bg-white rounded-lg shadow-sm overflow-hidden cursor-pointer transition-transform hover:scale-[1.02] ${isSelected ? "ring-4 ring-blue-500" : ""}`, style: containerStyles, onClick: ()=>toggleSelect(image.src), __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-square", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.src, alt: image.alt, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 138, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-white", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm truncate", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, image.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xs text-gray-500", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }, new Date(image.date).toLocaleDateString()), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, Object.entries(image.properties || {}).map(([key, value])=>/*#__PURE__*/ React.createElement("div", { key: key, __source: { fileName: "", lineNumber: 152, columnNumber: 23 }, __self: this }, `${key}: ${value}`))))); })), selectedImages.length === 2 && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-white shadow-lg p-4", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center gap-4", __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, selectedImages.map((src, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[48%] aspect-video bg-gray-100 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 167, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: `比較画像 ${index + 1}`, className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }))))))); }