function ProductCard({ name, price, imageUrl, inStock }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[300px] rounded-lg shadow-lg bg-white overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: `商品：${name}の画像`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-noto text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "font-noto text-xl text-[#2C5282] mb-2", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "¥", price.toLocaleString()), /*#__PURE__*/ React.createElement("div", { className: `inline-block px-3 py-1 rounded-full text-sm ${inStock ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, inStock ? "在庫あり" : "在庫なし"))); } function ProductCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProductCard, { name: "高級腕時計", price: 128000, imageUrl: "/watch.jpg", inStock: true, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProductCard, { name: "レザーバッグ", price: 45800, imageUrl: "/bag.jpg", inStock: false, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProductCard, { name: "スニーカー", price: 12800, imageUrl: "/shoes.jpg", inStock: true, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function CartItem({ image, title, price, quantity, onQuantityChange, onRemove }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 border-b border-gray-200 w-full font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `${title}の商品画像`, className: "w-[80px] h-[80px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-4", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-800", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "¥", price.toLocaleString()), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>onQuantityChange(quantity - 1), disabled: quantity <= 1, className: "px-2 py-1 border rounded-l bg-gray-50 hover:bg-gray-100 disabled:opacity-50", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-minus text-sm", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "px-4 py-1 border-t border-b", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, quantity), /*#__PURE__*/ React.createElement("button", { onClick: ()=>onQuantityChange(quantity + 1), className: "px-2 py-1 border rounded-r bg-gray-50 hover:bg-gray-100", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus text-sm", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { onClick: onRemove, className: "ml-4 text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }))); } function CartItemStory() { const [quantity1, setQuantity1] = useState(1); const [quantity2, setQuantity2] = useState(2); return /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto space-y-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(CartItem, { image: "/product1.jpg", title: "青いTシャツ", price: 2500, quantity: quantity1, onQuantityChange: setQuantity1, onRemove: ()=>alert("商品を削除"), __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(CartItem, { image: "/product2.jpg", title: "黒いパンツ", price: 3800, quantity: quantity2, onQuantityChange: setQuantity2, onRemove: ()=>alert("商品を削除"), __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); } function SearchBar({ onSearch = ()=>{} }) { const [searchTerm, setSearchTerm] = useState(""); const [searchType, setSearchType] = useState("name"); const handleSearch = (e)=>{ e.preventDefault(); onSearch({ searchTerm, searchType }); }; return /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "w-full max-w-2xl mx-auto p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "検索キーワードを入力", className: "flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: searchType, onChange: (e)=>setSearchType(e.target.value), className: "px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "name", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "商品名"), /*#__PURE__*/ React.createElement("option", { value: "modelNumber", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "型番"), /*#__PURE__*/ React.createElement("option", { value: "category", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "カテゴリー")), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search mr-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), "検索"))); } function SearchBarStory() { const handleSearch = (searchParams)=>{ console.log("検索パラメータ:", searchParams); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchBar, { onSearch: handleSearch, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); } function MainComponent() { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [filteredProducts, setFilteredProducts] = useState([]); const fetchProducts = useCallback(async ()=>{ try { setLoading(true); const response = await fetch("/api/products/client", { method: "POST" }); const data = await response.json(); setProducts(data.products || []); setFilteredProducts(data.products || []); } catch (err) { setError("商品の読み込みに失敗しました"); } finally{ setLoading(false); } }, []); useEffect(()=>{ fetchProducts(); }, [ fetchProducts ]); const handleSearch = ({ searchTerm, searchType })=>{ const filtered = products.filter((product)=>{ const searchValue = searchTerm.toLowerCase(); if (searchType === "name") { return product.name.toLowerCase().includes(searchValue); } if (searchType === "modelNumber") { return product.modelNumber?.toLowerCase().includes(searchValue); } if (searchType === "category") { return product.category?.toLowerCase().includes(searchValue); } return true; }); setFilteredProducts(filtered); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(SearchBar, { onSearch: handleSearch, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this })), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-3xl text-blue-600", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-center p-4 bg-red-50 rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, filteredProducts.map((product)=>/*#__PURE__*/ React.createElement(ProductCard, { key: product.id, name: product.name, price: product.price, imageUrl: product.imageUrl, inStock: product.inStock, __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this })))); }