function MonthlySelectItems({ loading, clothingItems }) { const itemsToShow = clothingItems.slice(0, 10); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-8", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-12 text-center font-vonk-pro", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "今月のセレクト"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-blue-500", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-8", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, itemsToShow.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-100 p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-gray-200 mb-4 rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tshirt text-4xl text-gray-400", __source: { fileName: "", lineNumber: 16, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-center font-vonk-pro text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-center font-vonk-pro text-sm", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, item.description))))); } function MonthlySelectItemsStory() { const sampleItems = [ { name: "シャツ1", description: "シンプルでカジュアルなシャツ" }, { name: "シャツ2", description: "モダンなデザインのシャツ" }, { name: "シャツ3", description: "スポーティな感じのシャツ" }, { name: "シャツ4", description: "エレガントなシャツ" }, { name: "シャツ5", description: "日常使いに最適なシャツ" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MonthlySelectItems, { loading: true, clothingItems: sampleItems, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MonthlySelectItems, { loading: false, clothingItems: sampleItems, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this })); } function ClothingDisplayDashboard({ loading, clothingItems }) { return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-12 text-center font-vonk-pro", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "今月のセレクト"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-blue-500", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-8", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, clothingItems.slice(0, 10).map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-100 p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-gray-200 mb-4 rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tshirt text-4xl text-gray-400", __source: { fileName: "", lineNumber: 14, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-center font-vonk-pro text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-center font-vonk-pro text-sm", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, item.description))))); } function ClothingDisplayDashboardStory() { const sampleClothingItems = [ { name: 'シャツ1', description: '説明1' }, { name: 'シャツ2', description: '説明2' }, { name: 'シャツ3', description: '説明3' }, { name: 'シャツ4', description: '説明4' }, { name: 'シャツ5', description: '説明5' }, { name: 'シャツ6', description: '説明6' }, { name: 'シャツ7', description: '説明7' }, { name: 'シャツ8', description: '説明8' }, { name: 'シャツ9', description: '説明9' }, { name: 'シャツ10', description: '説明10' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ClothingDisplayDashboard, { loading: false, clothingItems: sampleClothingItems, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ClothingDisplayDashboard, { loading: true, clothingItems: sampleClothingItems, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [clothingItems, setClothingItems] = React.useState([]); const [loading, setLoading] = React.useState(false); React.useEffect(()=>{ fetchClothingItems(); }, []); const fetchClothingItems = async ()=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: "Generate 10 unique clothing items with names and brief descriptions." } ] }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status && data.choices && data.choices[0] && data.choices[0].message) { const content = data.choices[0].message.content; const items = content.split('\n').filter((item)=>item.trim() !== '').map((item)=>{ const [name, description] = item.split(':'); return { name: name.trim(), description: description.trim() }; }); setClothingItems(items); } } catch (error) { console.error("Error fetching clothing items:", error); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-8", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-12 text-center font-vonk-pro", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "今月のセレクト"), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-blue-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, clothingItems.slice(0, 10).map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-100 p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-gray-200 mb-4 rounded-md flex items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tshirt text-4xl text-gray-400", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "text-center font-vonk-pro text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("p", { className: "text-center font-vonk-pro text-sm", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, item.description))))); }