function MainComponent() { const [selectedDishes, setSelectedDishes] = React.useState([]); const [modalOpen, setModalOpen] = React.useState(false); const dishes = [ { id: 1, dishName: "Sushi", translatedDishName: "寿司", dishDescription: "Fresh fish with rice", translatedDishDescription: "新鮮な魚とご飯", image: "./mini-sushi.jpg" }, { id: 2, dishName: "Ramen", translatedDishName: "ラーメン", dishDescription: "Noodle soup", translatedDishDescription: "ヌードルスープ", image: "./mini-ramen.jpg" }, { id: 3, dishName: "Tempura", translatedDishName: "天ぷら", dishDescription: "Battered and deep-fried fish/vegetables", translatedDishDescription: "揚げた魚や野菜", image: "./mini-tempura.jpg" }, { id: 4, dishName: "Takoyaki", translatedDishName: "たこ焼き", dishDescription: "Octopus balls", translatedDishDescription: "たこ焼きボール", image: "./mini-takoyaki.jpg" }, { id: 5, dishName: "Okonomiyaki", translatedDishName: "お好み焼き", dishDescription: "Savory pancake", translatedDishDescription: "お好み焼き", image: "./mini-okonomiyaki.jpg" }, { id: 6, dishName: "Gyoza", translatedDishName: "餃子", dishDescription: "Dumplings", translatedDishDescription: "餃子", image: "./mini-gyoza.jpg" }, { id: 7, dishName: "Miso Soup", translatedDishName: "味噌汁", dishDescription: "Soybean paste soup", translatedDishDescription: "大豆の味噌スープ", image: "./mini-miso-soup.jpg" }, { id: 8, dishName: "Katsu", translatedDishName: "カツ", dishDescription: "Breaded and fried cutlet", translatedDishDescription: "パン粉をまぶして揚げたカツ", image: "./mini-katsu.jpg" } ]; const toggleModal = ()=>setModalOpen(!modalOpen); const handleSelectDish = (dish)=>{ setSelectedDishes((prev)=>{ if (prev.includes(dish)) { return prev.filter((d)=>d !== dish); } else { return [ ...prev, dish ]; } }); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "relative h-[300px] bg-cover bg-center", style: { backgroundImage: "url('./menu-signature.jpg')" }, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 p-4 text-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "飲食店の名前"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-white", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "飲食店の説明（省略形）"))), /*#__PURE__*/ React.createElement("main", { className: "p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, dishes.map((dish)=>/*#__PURE__*/ React.createElement("div", { key: dish.id, className: "bg-white px-6 py-4 flex items-center rounded-lg shadow-lg h-[150px]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `select-${dish.id}`, checked: selectedDishes.includes(dish), onChange: ()=>handleSelectDish(dish), className: "h-4 w-4 mr-4", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: dish.image, alt: `ミニサイズの料理 ${dish.dishName}`, className: "w-[100px] h-[100px] rounded-md object-cover mr-6", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, dish.dishName), /*#__PURE__*/ React.createElement("h3", { className: "text-md text-gray-600", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, dish.translatedDishName), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-sm", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, dish.dishDescription), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, dish.translatedDishDescription))), /*#__PURE__*/ React.createElement("div", { className: "ml-6 flex flex-col items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "mb-2 p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "詳細表示"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleSelectDish(dish), className: "mb-2 p-2 bg-green-500 text-white rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "設定画像1表示")))))), /*#__PURE__*/ React.createElement("button", { onClick: toggleModal, className: "fixed bottom-4 right-4 bg-[#F8B400] p-4 rounded-full text-white", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "選択済みの料理"), modalOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg shadow-lg w-[80%] h-[80%] overflow-y-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "選択済みの料理一覧"), selectedDishes.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "選択済みの料理がありません。") : /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, selectedDishes.map((dish)=>/*#__PURE__*/ React.createElement("li", { key: dish.id, className: "border-b p-2", __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, dish.dishName, " - ", dish.translatedDishName))), /*#__PURE__*/ React.createElement("button", { onClick: toggleModal, className: "mt-4 p-2 bg-red-500 text-white rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "閉じる"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, ` header { transition: height 0.3s ease; } @media (max-width: 640px) { main div.grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } main div.inner { flex-direction: column; } header { height: 200px; } } @media (min-width: 641px) { header.shrink { height: 100px; } } window.addEventListener('scroll', function () { const header = document.querySelector('header'); header.classList.toggle('shrink', window.scrollY > 50); }); `)); }