function ThreePartFooter({ sectionHeaders, linkColumns }) { return /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-900 p-10 text-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1000px] mx-auto grid grid-cols-1 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, sectionHeaders.map((sectionHeader, index)=>/*#__PURE__*/ React.createElement("div", { key: sectionHeader, __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "font-semibold mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, sectionHeader), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, linkColumns[index].map((link)=>/*#__PURE__*/ React.createElement("li", { key: link.text, __source: { fileName: "", lineNumber: 10, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "hover:text-blue-300 block py-1", __source: { fileName: "", lineNumber: 11, columnNumber: 19 }, __self: this }, link.text))))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-8", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "amazon-logo.png", alt: "Amazon logo", className: "mr-2", style: { width: '80px' }, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#bbd2c5] text-xs", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "© 1996-2022, Amazon.com, Inc. or its affiliates"))); } function ThreePartFooterStory() { const sectionHeaders = [ 'Amazonについて', 'Amazonでビジネス', 'Amazonのお支払い', 'ヘルプ＆ガイド' ]; const linkColumns = [ [ { href: "/careers", text: "採用情報" }, { href: "/about", text: "About Amazon" }, { href: "/news", text: "Newsroom" }, { href: "/investor-relations", text: "投資家への照会" }, { href: "/community", text: "社会貢献・地域活動" }, { href: "/science", text: "Amazon Science" } ], [ { href: "/sell", text: "Amazonで売る" }, { href: "/fulfillment-by-amazon", text: "フルフィルメント by Amazon" }, { href: "/business", text: "Amazonビジネス（法人購買）" }, { href: "/amazon-pay", text: "Amazon Pay（決済サービス）" }, { href: "/affiliates", text: "アソシエイト（アフィリエイト）" }, { href: "/advertising", text: "Amazonで広告掲載をする" }, { href: "/self-publishing", text: "Amazonで出版" }, { href: "/seller-stories", text: "> Amazon出品者の話を聞く" } ], [ { href: "/amazon-points", text: "Amazonポイント" }, { href: "/gift-cards", text: "Amazonギフトカード" }, { href: "/mastercard", text: "Amazon Mastercard" }, { href: "/partner-gift-cards", text: "パートナーギフトカードブランド" }, { href: "/all-payment-methods", text: "すべての支払い方法を見る" } ], [ { href: "/covid-19-response", text: "新型コロナウイルス関連" }, { href: "/shipping", text: "配送と配送料金" }, { href: "/prime", text: "Amazonプライム" }, { href: "/returns", text: "商品の返品・交換" }, { href: "/digital-content", text: "コンテンツと端末の管理" }, { href: "/price-guide", text: "価格について" }, { href: "/payment-guide", text: "お支払いガイド" } ] ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ThreePartFooter, { sectionHeaders: sectionHeaders, linkColumns: linkColumns, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this })); } function CategoryHeader({ text }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[50px] bg-[#F5F5F5] text-[#333] font-roboto flex items-center px-3", __source: { fileName: "", lineNumber: 2, columnNumber: 10 }, __self: this }, text); } function SliderControl({ direction }) { const iconClass = direction === 'left' ? 'fa-chevron-left' : 'fa-chevron-right'; return /*#__PURE__*/ React.createElement("button", { className: `absolute z-10 w-[50px] h-[50px] bg-white flex justify-center items-center top-[200px] ${direction === 'left' ? 'left-0' : 'right-0'}`, __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${iconClass} text-[#333]`, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this })); } function ProductCard({ imageSrc, title, price, isSmartDevice, discount, timer, renewed }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[150px] h-[220px] bg-white shadow-md m-2", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: title, className: "w-full h-[120px] object-cover", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-sm mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, title), isSmartDevice && /*#__PURE__*/ React.createElement("div", { className: "text-xs bg-[#F0F0F0] px-1 py-0.5 inline-block mb-2", __source: { fileName: "", lineNumber: 20, columnNumber: 27 }, __self: this }, "Works with Alexa"), price && /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xs text-red-500", __source: { fileName: "", lineNumber: 21, columnNumber: 19 }, __self: this }, price), discount && /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xs line-through", __source: { fileName: "", lineNumber: 22, columnNumber: 22 }, __self: this }, discount), timer && /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xs", __source: { fileName: "", lineNumber: 23, columnNumber: 19 }, __self: this }, timer), renewed && /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-xs text-green-600", __source: { fileName: "", lineNumber: 24, columnNumber: 21 }, __self: this }, "Renewed"))); } function PromotionBanner({ imageSrc, title }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[150px] flex items-center justify-center bg-white shadow-md my-2", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: title, className: "object-cover h-full", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function HighlightedProductsSlider({ categoryText, products, promotions }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-[1050px] mx-auto my-5", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CategoryHeader, { text: categoryText, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-hidden mt-2", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(SliderControl, { direction: "left", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), products.map((product, index)=>/*#__PURE__*/ React.createElement(ProductCard, { key: index, ...product, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(SliderControl, { direction: "right", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, promotions.map((promotion, index)=>/*#__PURE__*/ React.createElement(PromotionBanner, { key: index, ...promotion, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })))); } function HighlightedProductsSliderStory() { const products = [ { imageSrc: "webcam.jpg", title: "Web Camera", price: "$99" }, { imageSrc: "fan.jpg", title: "Portable Fan" }, { imageSrc: "smart-home.jpg", title: "Smart Home Device", isSmartDevice: true }, { imageSrc: "food-item.jpg", title: "Instant Noodles", discount: "$3", timer: "03:51:06" }, { imageSrc: "renewed-item.jpg", title: "Amazon Renewed", renewed: true } ]; const promotions = [ { imageSrc: "prime-video-banner.jpg", title: "Prime Video Promotion" }, { imageSrc: "kindle-unlimited-banner.jpg", title: "Kindle Unlimited Promotion" }, { imageSrc: "gaming-console-banner.jpg", title: "Gaming Console Promotion" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HighlightedProductsSlider, { categoryText: "暮らしを快適に。", products: products, promotions: promotions, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this })); } function CategoryClickDirector({ title, productType, imageUrl, moreInfoUrl }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-[192px] m-2", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `Image for ${productType}`, className: "w-full h-[150px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-2 bg-white border border-t-0 rounded-b-lg w-full", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-roboto truncate", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("a", { href: moreInfoUrl, className: "text-xs text-blue-500 font-roboto hover:underline", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, "もっと見る"))); } function SectionHeader({ title }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full py-2 px-4 bg-gray-200", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, title)); } function CategoryClickDirectorStory() { const sections = [ { header: 'ホームの注目商品', products: [ { title: 'Modern Home Furniture', imageUrl: 'path/to/your/image.jpg', moreInfoUrl: '#' } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "max-w-full", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, sections.map((section, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(SectionHeader, { title: section.header, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, section.products.map((product, idx)=>/*#__PURE__*/ React.createElement(CategoryClickDirector, { key: idx, title: product.title, productType: section.header, imageUrl: product.imageUrl, moreInfoUrl: product.moreInfoUrl, __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this })))))); } function IntuitiveSiteHeader({ logo, navItems, searchBar, localeSwitcher, accountAccess, cartStatus, helpLink, navigationMenu }) { return /*#__PURE__*/ React.createElement("header", { className: "bg-[#131921] p-0 text-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: logo?.url, className: "flex items-center", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo?.src, alt: logo?.alt, className: "h-[50px]", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-[#FF9900] font-semibold ml-2", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, logo?.text)), navItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "ml-4 flex items-center", style: { width: `${item.width}px`, height: `${item.height}px` }, __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, item.text)))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", style: { width: searchBar.width, height: searchBar.height }, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: searchBar.placeholder, name: "search", className: "px-4 py-2 border-none text-black rounded-l-md flex-grow", value: searchBar.query, onChange: searchBar.onChange, __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#febd69] text-black px-4 rounded-r-md", onClick: searchBar.onSearch, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center cursor-pointer", style: { width: localeSwitcher.width, height: localeSwitcher.height }, __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-globe text-xs mx-1`, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, localeSwitcher.locale)), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", style: { width: accountAccess.width, height: accountAccess.height }, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, accountAccess.accountName), /*#__PURE__*/ React.createElement("i", { className: "fas fa-caret-down text-xs ml-1", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { width: cartStatus.width, height: cartStatus.height }, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, cartStatus.text)), /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer", style: { width: helpLink.width, height: helpLink.height }, __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, helpLink.text)))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#232f3e] text-sm p-2 flex items-center", style: { width: `${navigationMenu.width}px`, height: `${navigationMenu.height}px` }, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, navigationMenu.items.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "ml-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, item)))); } function IntuitiveSiteHeaderStory() { const searchBarInitialState = "Search Amazon inventory"; const [searchQuery, setSearchQuery] = React.useState(searchBarInitialState); const handleSearch = ()=>{ console.log("Searching for:", searchQuery); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IntuitiveSiteHeader, { logo: { src: "https://i.gyazo.com/735ee8cdc855db1ca1b8621ab412b282.png", alt: "Amazon Prime logo", text: "prime", url: "/" }, navItems: [ { text: "Amazonポイント", width: 80, height: 50 }, { text: "クレジットカード", width: 100, height: 50 } ], searchBar: { query: searchQuery, placeholder: searchBarInitialState, onChange: (e)=>setSearchQuery(e.target.value), onSearch: handleSearch, width: 400, height: 30 }, localeSwitcher: { locale: "JP", width: 50, height: 50 }, accountAccess: { accountName: "お届け先 SHUNSUKE様", width: 200, height: 50 }, cartStatus: { text: "カートに商品はありません", width: 100, height: 50 }, helpLink: { text: "ヘルプ", width: 100, height: 50 }, navigationMenu: { items: [ "ヘルプ" ], width: 1200, height: 30 }, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this })); } function MainComponent() { const categories = [ { title: "Books", productType: "Books", imageUrl: "path/to/books-image.jpg", moreInfoUrl: '/category/books' }, { title: "Electronics", productType: "Electronics", imageUrl: "path/to/electronics-image.jpg", moreInfoUrl: '/category/electronics' }, { title: "Fashion", productType: "Fashion", imageUrl: "path/to/fashion-image.jpg", moreInfoUrl: '/category/fashion' } ]; const [searchQuery, setSearchQuery] = React.useState(""); const handleSearch = ()=>{ console.log("Searching for:", searchQuery); }; const products = [ { imageSrc: "webcam.jpg", title: "Web Camera", price: "$99" }, { imageSrc: "fan.jpg", title: "Portable Fan" }, { imageSrc: "smart-home.jpg", title: "Smart Home Device", isSmartDevice: true }, { imageSrc: "food-item.jpg", title: "Instant Noodles", discount: "$3", timer: "03:51:06" }, { imageSrc: "renewed-item.jpg", title: "Amazon Renewed", renewed: true } ]; const promotions = [ { imageSrc: "prime-video-banner.jpg", title: "Prime Video Promotion" }, { imageSrc: "kindle-unlimited-banner.jpg", title: "Kindle Unlimited Promotion" }, { imageSrc: "gaming-console-banner.jpg", title: "Gaming Console Promotion" } ]; const sectionHeaders = [ 'About Amazon', 'Customer support', 'Follow Us' ]; const linkColumns = [ [ { href: "/about", text: "About Us" }, { href: "/privacy-policy", text: "Privacy Policy" }, { href: "/terms", text: "Terms of Service" } ], [ { href: "/contact", text: "Contact Us" }, { href: "/faq", text: "FAQ" }, { href: "/returns", text: "Returns" } ], [ { href: "https://facebook.com", text: "Facebook" }, { href: "https://twitter.com", text: "Twitter" }, { href: "https://instagram.com", text: "Instagram" } ] ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(IntuitiveSiteHeader, { logo: { src: "amazon-logo.png", alt: "Amazon logo", text: "Amazon", url: "/" }, navItems: [ { text: "本", width: 40, height: 40 }, { text: "電子機器", width: 80, height: 40 }, { text: "ファッション", width: 60, height: 40 } ], searchBar: { query: searchQuery, placeholder: "商品を検索", onChange: (e)=>setSearchQuery(e.target.value), onSearch: handleSearch, width: 400, height: 30 }, localeSwitcher: { locale: "JP", width: 50, height: 50 }, accountAccess: { accountName: "アカウント", width: 100, height: 50 }, cartStatus: { text: "カート", width: 50, height: 50 }, helpLink: { text: "ヘルプ", width: 40, height: 50 }, navigationMenu: { items: [ "本", "電子機器", "ファッション" ], width: 1200, height: 40 }, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(HighlightedProductsSlider, { categoryText: "Featured Products", products: products, promotions: promotions, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("section", { className: "py-4", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 max-w-[1200px] mx-auto", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement(CategoryClickDirector, { key: index, title: category.title, productType: category.productType, imageUrl: category.imageUrl, moreInfoUrl: category.moreInfoUrl, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement(ThreePartFooter, { sectionHeaders: sectionHeaders, linkColumns: linkColumns, __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this })); }