function NewComponent({ slides, activeSlide, onSlideChange }) { const handleSlideChange = (direction)=>{ const newActiveSlide = (activeSlide + direction + slides.length) % slides.length; onSlideChange(newActiveSlide); }; return /*#__PURE__*/ React.createElement("div", { className: "relative flex items-center justify-center py-8", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSlideChange(-1), className: "absolute left-0 z-10", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left text-2xl text-blue-500", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this })), slides.map((slide, index)=>{ const isCentral = index === activeSlide; const isAdjacent = index === (activeSlide - 1 + slides.length) % slides.length || index === (activeSlide + 1) % slides.length; const className = isCentral ? "w-[600px] h-[400px] opacity-100" : isAdjacent ? "w-[300px] h-[200px] opacity-50 cursor-pointer" : "hidden"; return /*#__PURE__*/ React.createElement("div", { key: slide.id, className: `transition-all duration-300 ${className} mx-2`, onClick: ()=>!isCentral && onSlideChange(index), __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: slide.src, alt: slide.alt, className: "w-full h-full object-cover rounded-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })); }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSlideChange(1), className: "absolute right-0 z-10", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-2xl text-blue-500", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }))); } function NewComponentStory() { const [activeSlide, setActiveSlide] = React.useState(0); const slides = [ { id: 1, src: "/images/photo1.jpg", alt: "Large central photo" }, { id: 2, src: "/images/photo2.jpg", alt: "Left small photo" }, { id: 3, src: "/images/photo3.jpg", alt: "Right small photo" } ]; return /*#__PURE__*/ React.createElement(NewComponent, { slides: slides, activeSlide: activeSlide, onSlideChange: setActiveSlide, __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }); } function Header() { const [language, setLanguage] = React.useState("日本語"); const [hasNotification, setHasNotification] = React.useState(true); return /*#__PURE__*/ React.createElement("div", { className: "font-sans bg-white", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow-md", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-2 flex items-center justify-between", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "AIZ Logo", className: "h-8 cursor-pointer", onClick: ()=>{}, __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow mx-4 flex justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-1/3", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "検索したいキーワードを入力", className: "w-full p-2 border border-gray-300 rounded-md", name: "search", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "absolute right-2 top-1/2 transform -translate-y-1/2", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-gray-400", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt text-gray-600", __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-gray-600", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-gray-600", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this })), hasNotification && /*#__PURE__*/ React.createElement("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: language, onChange: (e)=>setLanguage(e.target.value), className: "bg-white border border-gray-300 rounded-md p-1", name: "language", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "日本語", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, "日本語"), /*#__PURE__*/ React.createElement("option", { value: "English", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "English"), /*#__PURE__*/ React.createElement("option", { value: "中文", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "中文"))))), /*#__PURE__*/ React.createElement("nav", { className: "bg-blue-500", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-2 flex items-center justify-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-8 text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "マイページ"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "企業検索"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "ウォッチリスト"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "ヘルプ"), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-blue-500 px-6 py-1 rounded-md", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "ログイン"))))); } function HeaderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this })); } function ImageSliderWithNavigation({ images, currentImageIndex, handlePrevImage, handleNextImage }) { const imageSrc = images[currentImageIndex]; const altText = `Image ${currentImageIndex + 1}`; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center my-8 w-full max-w-[1000px] mx-auto", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePrevImage, className: "text-4xl text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-[800px] h-[600px] mx-4 flex justify-center items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: altText, className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleNextImage, className: "text-4xl text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }))); } function ImageSliderWithNavigationStory() { const images = [ "/images/image1.jpg", "/images/image2.jpg", "/images/image3.jpg" ]; const [currentImageIndex, setCurrentImageIndex] = React.useState(0); const handlePrevImage = ()=>setCurrentImageIndex((prevIndex)=>prevIndex === 0 ? images.length - 1 : prevIndex - 1); const handleNextImage = ()=>setCurrentImageIndex((prevIndex)=>prevIndex === images.length - 1 ? 0 : prevIndex + 1); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageSliderWithNavigation, { images: images, currentImageIndex: currentImageIndex, handlePrevImage: handlePrevImage, handleNextImage: handleNextImage, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this })); } function PolicyFooterDesign({ logoSrc, linksRow1, linksRow2 }) { return /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-100 py-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "Company Logo", className: "h-8 mx-auto mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 text-sm text-gray-600", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, linksRow1.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.href, className: "hover:underline", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, link.text))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 text-sm text-gray-600 mt-2", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, linksRow2.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.href, className: "hover:underline", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, link.text))))); } function PolicyFooterDesignStory() { const linksRow1 = [ { href: "#", text: "プライバシー利用規約" }, { href: "#", text: "プライバシーポリシー" }, { href: "#", text: "外部委託先ポリシー" }, { href: "#", text: "○○(サービス名)利用規約" }, { href: "#", text: "定款変更履歴" }, { href: "#", text: "実施済みプライバーシーポリシー" } ]; const linksRow2 = [ { href: "#", text: "電磁交付規約" }, { href: "#", text: "コンプライアンスポリシー" }, { href: "#", text: "特定商取引に関する表記" }, { href: "#", text: "反社会的勢力に対する基本方針" }, { href: "#", text: "個人データの安全管理に係る基本方針" }, { href: "#", text: "法令遵守のために" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PolicyFooterDesign, { logoSrc: "/logo.png", linksRow1: linksRow1, linksRow2: linksRow2, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this })); } function MainComponent() { const [showModal, setShowModal] = React.useState(false); const [currentImageIndex, setCurrentImageIndex] = React.useState(0); const slides = [ { id: 0, src: "/slide1.jpg", alt: "Pet food product" }, { id: 1, src: "/slide2.jpg", alt: "Dog with various pet products" }, { id: 2, src: "/slide3.jpg", alt: "Cat food product" } ]; const categories = [ { icon: "fa-chart-line", text: "製造業" }, { icon: "fa-truck", text: "運輸業" }, { icon: "fa-store", text: "小売" }, { icon: "fa-bolt", text: "電気・ガス" }, { icon: "fa-globe", text: "情報通信" }, { icon: "fa-robot", text: "AI" }, { icon: "fa-coins", text: "金融・保険" }, { icon: "fa-graduation-cap", text: "学術・専門" } ]; const areas = [ "東京", "大阪", "名古屋", "神奈川", "台湾", "中国", "アメリカ", "イギリス" ]; const handlePrevImage = ()=>{ setCurrentImageIndex((prevIndex)=>prevIndex === 0 ? slides.length - 1 : prevIndex - 1); }; const handleNextImage = ()=>{ setCurrentImageIndex((prevIndex)=>prevIndex === slides.length - 1 ? 0 : prevIndex + 1); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ImageSliderWithNavigation, { images: slides.map((slide)=>slide.src), currentImageIndex: currentImageIndex, handlePrevImage: handlePrevImage, handleNextImage: handleNextImage, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "my-8", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-center w-full", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "カテゴリで検索"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(true), className: "text-blue-500", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "もっと見る")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 md:grid-cols-8 gap-2", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-16 h-16 bg-blue-300 rounded-lg flex items-center justify-center mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${category.icon} text-white text-2xl`, __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-center", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, category.text))))), /*#__PURE__*/ React.createElement("div", { className: "my-8", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-center w-full", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "エリアで検索"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(true), className: "text-blue-500", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "もっと見る")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, areas.map((area, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-blue-100 text-blue-800 px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, area)))), /*#__PURE__*/ React.createElement("div", { className: "my-8", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "おすすめの企業"), /*#__PURE__*/ React.createElement("div", { className: "relative flex items-center", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "absolute left-0 z-10", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-left text-2xl text-blue-500", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 overflow-x-auto py-4", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/company1.jpg", alt: "Company 1", className: "w-64 h-40 object-cover rounded-lg", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/company2.jpg", alt: "Company 2", className: "w-64 h-40 object-cover rounded-lg", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "/company3.jpg", alt: "Company 3", className: "w-64 h-40 object-cover rounded-lg", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "absolute right-0 z-10", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-right text-2xl text-blue-500", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement(PolicyFooterDesign, { logoSrc: "/logo.png", linksRow1: [ { href: "#", text: "プライバシー利用規約" }, { href: "#", text: "プライバシーポリシー" }, { href: "#", text: "外部委託先ポリシー" }, { href: "#", text: "○○(サービス名)利用規約" }, { href: "#", text: "定款変更履歴" }, { href: "#", text: "実施済みプライバーシーポリシー" } ], linksRow2: [ { href: "#", text: "電磁交付規約" }, { href: "#", text: "コンプライアンスポリシー" }, { href: "#", text: "特定商取引に関する表記" }, { href: "#", text: "反社会的勢力に対する基本方針" }, { href: "#", text: "個人データの安全管理に係る基本方針" }, { href: "#", text: "法令遵守のために" } ], __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", onClick: ()=>setShowModal(false), __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg", onClick: (e)=>e.stopPropagation(), __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "More Options"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, [ ...Array.from({ length: 9 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("button", { key: i, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "Option ", i + 1)))))); }