function MainComponent() { const [whiskies, setWhiskies] = React.useState([ { id: 1, brand: "Yamazaki", name: "Yamazaki 12 Years", amazonPrice: 14500, averagePrice30Days: 14200, imageUrl: "./images/yamazaki-12.jpg" }, { id: 2, brand: "Hakushu", name: "Hakushu 12 Years", amazonPrice: 15500, averagePrice30Days: 15200, imageUrl: "./images/hakushu-12.jpg" }, { id: 3, brand: "Nikka", name: "Nikka Taketsuru Pure Malt", amazonPrice: 11500, averagePrice30Days: 11200, imageUrl: "./images/nikka-taketsuru.jpg" } ]); const [isMenuOpen, setIsMenuOpen] = React.useState(false); const [selectedBrand, setSelectedBrand] = React.useState(whiskies[0]?.brand || ''); const brands = React.useMemo(()=>[ ...new Set(whiskies.map((whisky)=>whisky.brand)) ], [ whiskies ]); const filteredWhiskies = React.useMemo(()=>whiskies.filter((whisky)=>whisky.brand === selectedBrand), [ selectedBrand, whiskies ]); const calculatePriceDropPercentage = (amazonPrice, averagePrice30Days)=>{ const decrease = averagePrice30Days - amazonPrice; return (decrease / averagePrice30Days * 100).toFixed(2); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 flex justify-between items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xl py-2 px-4 bg-blue-500 text-white rounded-lg", onClick: ()=>setIsMenuOpen(!isMenuOpen), __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", "aria-hidden": "true", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), " Brands"), /*#__PURE__*/ React.createElement("button", { className: "text-xl py-2 px-4 bg-gray-300 text-gray-700 rounded-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "mr-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "🔃"), " Sort")), isMenuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute bg-white shadow-lg rounded-lg p-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, brands.map((brand)=>/*#__PURE__*/ React.createElement("button", { key: brand, className: `block w-full text-left px-4 py-2 rounded-lg ${selectedBrand === brand ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'}`, onClick: ()=>{ setSelectedBrand(brand); setIsMenuOpen(false); }, __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, brand))), selectedBrand && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mt-6 mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, selectedBrand), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, filteredWhiskies.map((whisky)=>/*#__PURE__*/ React.createElement("div", { key: whisky.id, className: "bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: whisky.imageUrl, alt: `Bottle of ${whisky.name}`, className: "w-full h-[200px] object-cover", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, whisky.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, "アマゾン価格: ¥", whisky.amazonPrice), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 49, columnNumber: 19 }, __self: this }, "30日平均: ¥", whisky.averagePrice30Days), /*#__PURE__*/ React.createElement("p", { className: "text-red-600", __source: { fileName: "", lineNumber: 50, columnNumber: 19 }, __self: this }, "値下げ率: ", calculatePriceDropPercentage(whisky.amazonPrice, whisky.averagePrice30Days), "%"))))))); }