function ShirtDisplay({ src, alt }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "w-full md:w-[300px] h-[300px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ShirtDisplayStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ShirtDisplay, { src: "/path-to-product-image.jpg", alt: "Detailed view of シャツ", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { const [quantity, setQuantity] = React.useState(1); const [selectedColor, setSelectedColor] = React.useState(null); const [showColorPopup, setShowColorPopup] = React.useState(false); const handleAddToCart = ()=>{ console.log(`Added ${quantity} of シャツ to cart.`); }; const handleColorSelection = (color)=>{ setSelectedColor(color); setShowColorPopup(false); }; const colors = [ "#ff0000", "#00ff00", "#0000ff", "#ff00ff" ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl px-4 py-8", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-center font-bold mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "シャツ"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-start md:items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(ShirtDisplay, { src: "/path-to-product-image.jpg", alt: "Detailed view of シャツ", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "md:ml-8 mt-4 md:mt-0", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] text-lg mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt pretium mi, vel tincidunt ipsum interdum ac."), /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "$99.99"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mr-2", __source: { fileName: "", lineNumber: 33, columnNumber: 17 }, __self: this }, "Size:"), /*#__PURE__*/ React.createElement("select", { name: "size", className: "border border-gray-300 rounded py-1 px-2", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "S", __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, "S"), /*#__PURE__*/ React.createElement("option", { value: "M", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, "M"), /*#__PURE__*/ React.createElement("option", { value: "L", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, "L"), /*#__PURE__*/ React.createElement("option", { value: "XL", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, "XL"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mr-2", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, "Color:"), /*#__PURE__*/ React.createElement("div", { onClick: ()=>setShowColorPopup(!showColorPopup), className: "cursor-pointer w-[24px] h-[24px] border border-gray-300 rounded-full", style: { backgroundColor: selectedColor || "#ffffff" }, __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this })), showColorPopup && /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, colors.map((color)=>/*#__PURE__*/ React.createElement("div", { key: color, onClick: ()=>handleColorSelection(color), className: "w-[24px] h-[24px] rounded-full cursor-pointer border border-gray-300", style: { backgroundColor: color }, __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "quantity", className: "mr-2 text-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Quantity:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "quantity", name: "quantity", value: quantity, onChange: (e)=>setQuantity(Number(e.target.value)), className: "w-[60px] text-center border border-gray-300 rounded py-1", min: "1", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#010101] text-white py-2 px-6 rounded hover:bg-[#222222] transition duration-300", onClick: handleAddToCart, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "カートに追加"))))); }