function MainComponent() { const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState(0); const photos = [ { url: "/images/photo1.jpg", title: "山の朝", location: "北アルプス", equipment: "Canon EOS 5D Mark IV", tips: "朝露と光のバランスを取る", date: "2021-03-15", description: "山の風景" }, { url: "/images/photo2.jpg", title: "夜の光", location: "東京タワー", equipment: "Nikon D850", tips: "ロングエクスポージャーでライトの流れを捉える", date: "2019-11-23", description: "都市の夜景" }, { url: "/images/photo3.jpg", title: "夕日の沈む海", location: "沖縄", equipment: "Sony A7R III", tips: "露出を低くして色の鮮やかさを引き出す", date: "2020-06-30", description: "海辺の夕日" } ]; const goToNextPhoto = ()=>{ setCurrentPhotoIndex((currentPhotoIndex + 1) % photos.length); }; const goToPreviousPhoto = ()=>{ setCurrentPhotoIndex((currentPhotoIndex - 1 + photos.length) % photos.length); }; const currentPhoto = photos[currentPhotoIndex]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000] min-h-screen flex flex-col items-center justify-center text-[#fff] p-4 font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full flex justify-between items-center py-4 px-8", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "写真ポートフォリオ"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg mx-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-instagram", __source: { fileName: "", lineNumber: 48, columnNumber: 48 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg mx-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-twitter", __source: { fileName: "", lineNumber: 49, columnNumber: 48 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-lg mx-2", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-facebook-f", __source: { fileName: "", lineNumber: 50, columnNumber: 48 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentPhoto.url, alt: `${currentPhoto.title} - ${currentPhoto.description}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-10 left-10 bg-[#000] bg-opacity-60 p-4 rounded-lg text-xs", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "タイトル: ", currentPhoto.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "撮影地: ", currentPhoto.location), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "機材: ", currentPhoto.equipment), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "工夫: ", currentPhoto.tips), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "撮影日: ", currentPhoto.date)), /*#__PURE__*/ React.createElement("button", { onClick: goToPreviousPhoto, className: "absolute left-0 top-1/2 -translate-y-1/2 px-4 opacity-50 hover:opacity-100", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "❮"), /*#__PURE__*/ React.createElement("button", { onClick: goToNextPhoto, className: "absolute right-0 top-1/2 -translate-y-1/2 px-4 opacity-50 hover:opacity-100", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "❯")))); }