function MainComponent() { const headerItems = [ { name: "カート", icon: "fa-shopping-cart", link: "/cart", count: 2 }, { name: "お気に入り", icon: "fa-heart", link: "/favorites" }, { name: "アカウント", icon: "fa-user", link: "#" } ]; const products = [ { id: 1, name: '商品1', price: 1000, imageUrl: '/path/to/image1.jpg' }, { id: 2, name: '商品2', price: 2000, imageUrl: '/path/to/image2.jpg' }, { id: 3, name: '商品3', price: 3000, imageUrl: '/path/to/image3.jpg' } ]; const Header = ()=>{ const [searchTerm, setSearchTerm] = React.useState(""); const [suggestions, setSuggestions] = React.useState([]); const [dropdownOpen, setDropdownOpen] = React.useState(false); const handleSearchChange = (e)=>{ const value = e.target.value; setSearchTerm(value); // Set suggestions dynamically (mocked here) setSuggestions(value ? [ "サジェスト1", "サジェスト2", "サジェスト3" ] : []); }; return /*#__PURE__*/ React.createElement("header", { className: "w-full fixed top-0 bg-white flex items-center justify-between p-4 shadow-md z-10", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "font-crimson-text text-xl", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "ロゴ"), /*#__PURE__*/ React.createElement("div", { className: "relative flex-1 mx-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "search", value: searchTerm, onChange: handleSearchChange, className: "border rounded p-2 w-full", placeholder: "商品名、ブランド名で検索", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), suggestions.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "absolute bg-white border mt-1 w-full rounded shadow-lg z-10", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-2 hover:bg-gray-200 cursor-pointer", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, suggestion)))), headerItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.name, href: item.link, className: "ml-4 relative", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${item.icon} text-xl`, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), item.count && /*#__PURE__*/ React.createElement("span", { className: "absolute top-[-10px] right-[-10px] bg-red-500 text-white text-xs rounded-full w-[20px] h-[20px] flex items-center justify-center", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, item.count), item.name === "アカウント" && /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setDropdownOpen(!dropdownOpen), className: "ml-1", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "アカウント"), dropdownOpen && /*#__PURE__*/ React.createElement("ul", { className: "absolute right-0 mt-2 bg-white border rounded shadow-lg z-10", __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "p-2 hover:bg-gray-200 cursor-pointer", __source: { fileName: "", lineNumber: 60, columnNumber: 21 }, __self: this }, "マイページ"), /*#__PURE__*/ React.createElement("li", { className: "p-2 hover:bg-gray-200 cursor-pointer", __source: { fileName: "", lineNumber: 61, columnNumber: 21 }, __self: this }, "注文履歴"), /*#__PURE__*/ React.createElement("li", { className: "p-2 hover:bg-gray-200 cursor-pointer", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, "ログアウト")))))); }; const Footer = ()=>/*#__PURE__*/ React.createElement("footer", { className: "w-full fixed bottom-0 bg-[#F5F5F5] p-4 text-center", __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, "会社情報 | 特定商取引法に基づく表記 | プライバシーポリシー"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, "© 2023 会社名")); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Header, { __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-[64px]", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto mt-5 mb-[100px]", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, products.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "border rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/products/${product.id}`, __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.imageUrl, alt: `Image of ${product.name}`, className: "w-full h-48 object-cover rounded-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, product.price, "円"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "カートに入れる"))))), /*#__PURE__*/ React.createElement(Footer, { __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this })); }