function MainComponent() { const [bgColor, setBgColor] = React.useState('#ffffff'); const [image, setImage] = React.useState(null); const [scent, setScent] = React.useState(''); const [quantity, setQuantity] = React.useState(1); const [cart, setCart] = React.useState([]); const handleImageUpload = (e)=>{ const file = e.target.files[0]; setImage(URL.createObjectURL(file)); }; const addToCart = ()=>{ const item = { scent, quantity, image }; setCart([ ...cart, item ]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center min-h-screen bg-[#f9f9f9] p-4 font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-6 w-full max-w-[800px] mb-8", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "カスタマイズ香り設定"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-4 text-[#333]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "背景色:"), /*#__PURE__*/ React.createElement("input", { type: "color", value: bgColor, onChange: (e)=>setBgColor(e.target.value), className: "border-gray-300 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-center items-center rounded-full mb-4", style: { width: '8cm', height: '8cm', backgroundColor: bgColor }, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "ユーザーアップロード画像", className: "rounded-full", style: { width: '6cm', height: '6cm' }, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "border-gray-300 rounded px-2 py-1", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-4 text-[#333]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "香り:"), /*#__PURE__*/ React.createElement("select", { name: "scent", value: scent, onChange: (e)=>setScent(e.target.value), className: "border-gray-300 rounded px-2 py-1", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { value: "ローズ", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "ローズ"), /*#__PURE__*/ React.createElement("option", { value: "ラベンダー", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "ラベンダー"), /*#__PURE__*/ React.createElement("option", { value: "レモン", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "レモン"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-6", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-4 text-[#333]", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "個数:"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "quantity", value: quantity, onChange: (e)=>setQuantity(e.target.value), min: "1", className: "border-gray-300 rounded px-2 py-1 w-[80px]", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: addToCart, className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "カートに追加"), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#333] mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "カート内容"), cart.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "カートは空です。") : cart.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center mb-4 border-b pb-2", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.image, alt: `カート内画像 ${index}`, className: "rounded-full mr-4", style: { width: '4cm', height: '4cm' }, __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 103, columnNumber: 19 }, __self: this }, "香り: ", item.scent), /*#__PURE__*/ React.createElement("p", { className: "text-[#333]", __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, "個数: ", item.quantity))))))); }