function MainComponent() { const [isDrawerOpen, setIsDrawerOpen] = React.useState(false); const [gender, setGender] = React.useState(''); const [bodyType, setBodyType] = React.useState(''); const [personalColor, setPersonalColor] = React.useState(''); const [selectedOutfit, setSelectedOutfit] = React.useState(null); const [recommendedProducts, setRecommendedProducts] = React.useState([]); const toggleDrawer = ()=>{ setIsDrawerOpen(!isDrawerOpen); }; const handleRecommendation = ()=>{ const recommendations = [ { id: 1, name: 'Recommended Outfit 1', image: '/outfit1.jpg' }, { id: 2, name: 'Recommended Outfit 2', image: '/outfit2.jpg' } ]; setRecommendedProducts(recommendations); }; const selectRecommendedProduct = (product)=>{ setSelectedOutfit(product); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 rounded", onClick: toggleDrawer, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "似合うか確認する"), isDrawerOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-white p-4 z-10", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, !selectedOutfit ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("img", { src: "/current-product.jpg", alt: "Current product", className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, "性別を選択してください:"), /*#__PURE__*/ React.createElement("select", { name: "gender", value: gender, onChange: (e)=>setGender(e.target.value), className: "mb-4 p-2 border", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "性別"), /*#__PURE__*/ React.createElement("option", { value: "female", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, "女性的"), /*#__PURE__*/ React.createElement("option", { value: "male", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, "男性的")), /*#__PURE__*/ React.createElement("label", { className: "mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "骨格タイプを選択してください:"), /*#__PURE__*/ React.createElement("select", { name: "bodyType", value: bodyType, onChange: (e)=>setBodyType(e.target.value), className: "mb-4 p-2 border", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, "骨格タイプ"), /*#__PURE__*/ React.createElement("option", { value: "straight", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, "骨格ストレート"), /*#__PURE__*/ React.createElement("option", { value: "wave", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, "骨格ウェーブ"), /*#__PURE__*/ React.createElement("option", { value: "natural", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "骨格ナチュラル")), /*#__PURE__*/ React.createElement("label", { className: "mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "パーソナルカラーを選択してください:"), /*#__PURE__*/ React.createElement("select", { name: "personalColor", value: personalColor, onChange: (e)=>setPersonalColor(e.target.value), className: "mb-4 p-2 border", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, "パーソナルカラー"), /*#__PURE__*/ React.createElement("option", { value: "spring", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, "スプリング"), /*#__PURE__*/ React.createElement("option", { value: "summer", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "サマー"), /*#__PURE__*/ React.createElement("option", { value: "autumn", __source: { fileName: "", lineNumber: 85, columnNumber: 19 }, __self: this }, "オータム"), /*#__PURE__*/ React.createElement("option", { value: "winter", __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "ウィンター")), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white p-2 rounded", onClick: handleRecommendation, __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, "おすすめを表示する")), recommendedProducts.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg", __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, "おすすめ商品"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 mt-2", __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this }, recommendedProducts.map((product)=>/*#__PURE__*/ React.createElement("div", { key: product.id, className: "cursor-pointer", onClick: ()=>selectRecommendedProduct(product), __source: { fileName: "", lineNumber: 102, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: product.image, alt: `Recommended product ${product.id}`, className: "w-[100px] h-[100px] object-cover", __source: { fileName: "", lineNumber: 107, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 112, columnNumber: 25 }, __self: this }, product.name)))))) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/full-outfit.jpg", alt: "Full outfit", className: "w-full h-[400px] object-cover", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-yellow-500 text-white p-2 rounded mt-4", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "カートに入れる")))); }