function ThumbnailSlider({ posts }) { const [currentIndex, setCurrentIndex] = React.useState(0); React.useEffect(()=>{ const interval = setInterval(()=>{ setCurrentIndex((prevIndex)=>(prevIndex + 1) % posts.length); }, 5000); return ()=>clearInterval(interval); }, [ posts.length ]); const visiblePosts = posts.concat(posts).slice(currentIndex, currentIndex + 5); return /*#__PURE__*/ React.createElement("div", { className: "flex overflow-hidden w-full", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, visiblePosts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex-none w-[20%] h-full", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.image, alt: `新着記事${currentIndex + index + 1}のサムネイル`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })))); } function ThumbnailSliderStory() { const samplePosts = [ { image: 'image1.jpg' }, { image: 'image2.jpg' }, { image: 'image3.jpg' }, { image: 'image4.jpg' }, { image: 'image5.jpg' }, { image: 'image6.jpg' }, { image: 'image7.jpg' } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ThumbnailSlider, { posts: samplePosts, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function MainComponent() { const categories = [ "Home", "Guides", "News", "Reviews", "About" ]; const [currentSlide, setCurrentSlide] = React.useState(0); const [autoSlide, setAutoSlide] = React.useState(true); const slides = [ "slide1.jpg", "slide2.jpg", "slide3.jpg", "slide4.jpg", "slide5.jpg", "slide6.jpg" ]; const newPosts = [ { title: "New Post 1", image: "new1.jpg" }, { title: "New Post 2", image: "new2.jpg" }, { title: "New Post 3", image: "new3.jpg" }, { title: "New Post 4", image: "new4.jpg" }, { title: "New Post 5", image: "new5.jpg" }, { title: "New Post 6", image: "new6.jpg" }, { title: "New Post 7", image: "new7.jpg" }, { title: "New Post 8", image: "new8.jpg" }, { title: "New Post 9", image: "new9.jpg" }, { title: "New Post 10", image: "new10.jpg" } ]; const recentPosts = [ { title: "Recent Post 1", image: "recent1.jpg" }, { title: "Recent Post 2", image: "recent2.jpg" } ]; const categoriesTree = [ "Category 1", "Category 2", "Category 3" ]; React.useEffect(()=>{ if (autoSlide) { const timer = setInterval(()=>{ setCurrentSlide((prev)=>(prev + 1) % slides.length); }, 5000); return ()=>clearInterval(timer); } }, [ autoSlide, slides.length ]); const handlePrev = ()=>{ setAutoSlide(false); setCurrentSlide((prev)=>(prev - 1 + slides.length) % slides.length); }; const handleNext = ()=>{ setAutoSlide(false); setCurrentSlide((prev)=>(prev + 1) % slides.length); }; const visibleSlides = slides.slice(currentSlide, currentSlide + 4).concat(slides.slice(0, (currentSlide + 4) % slides.length)).slice(0, 4); const totalPages = Math.ceil(newPosts.length / 10); const [currentPage, setCurrentPage] = React.useState(1); const paginatedNewPosts = newPosts.slice((currentPage - 1) * 10, currentPage * 10); return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white py-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "FF14攻略ブログ"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("li", { key: category, className: "font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, category)))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto flex mt-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3/4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[300px] overflow-hidden", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, visibleSlides.map((slide, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute inset-0 transition-opacity", style: { left: `${index * 100}%` }, __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: slide, alt: `人気記事${currentSlide + index + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handlePrev, className: "absolute left-0 top-1/2 transform -translate-y-1/2 bg-white p-2", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "❮"), /*#__PURE__*/ React.createElement("button", { onClick: handleNext, className: "absolute right-0 top-1/2 transform -translate-y-1/2 bg-white p-2", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "❯")), /*#__PURE__*/ React.createElement("section", { className: "mt-6", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "新着記事"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 mt-4", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, paginatedNewPosts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 shadow-md rounded-md", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.image, alt: `新着記事${index + 1}`, className: "w-full h-[150px] object-cover rounded-t-md", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, post.title)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, Array.from({ length: totalPages }).map((_, i)=>{ const isCurrent = currentPage === i + 1; return /*#__PURE__*/ React.createElement("button", { key: i + 1, onClick: ()=>setCurrentPage(i + 1), className: `mx-1 px-3 py-1 rounded ${isCurrent ? "bg-blue-600 text-white" : "bg-gray-200 text-black"}`, __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, i + 1); }))), /*#__PURE__*/ React.createElement("section", { className: "mt-6", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "最近更新した記事"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, recentPosts.map((post, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 shadow-md rounded-md", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: post.image, alt: `最近更新した記事${index + 1}`, className: "w-full h-[150px] object-cover rounded-t-md", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 125, columnNumber: 19 }, __self: this }, post.title)))))), /*#__PURE__*/ React.createElement("aside", { className: "w-1/4 pl-4", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md rounded-md mb-6", __source: { fileName: "", lineNumber: 133, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "profile.jpg", alt: "プロフィール画像", className: "w-[100px] h-[100px] object-cover rounded-full mx-auto", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2 font-roboto", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "プロフィール説明文")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md rounded-md mb-6", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold font-crimson-text", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "カテゴリ"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, categoriesTree.map((category, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mt-1 font-roboto", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, category)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md rounded-md mb-6", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[250px] bg-gray-200 flex items-center justify-center", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, "広告スペース")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md rounded-md", __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold font-crimson-text", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, "新着記事"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, newPosts.slice(0, 5).map((post, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mt-1 font-roboto", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, post.title)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 162, columnNumber: 7 }, __self: this }, ` .transition-opacity { transition: opacity 1s ease; } .absolute div { transition: left 1s ease; } `)); }