function SquareProductCard({ imgUrl, altText, title, price }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-black p-4 shadow-md rounded-lg flex flex-col items-center w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imgUrl, alt: altText, className: "w-[180px] h-[180px] object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-roboto text-white truncate", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-black", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, price)); } function SquareProductCardStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SquareProductCard, { imgUrl: "path/to/item1.jpg", altText: "Product image 1", title: "Product Name 1", price: "¥1,000", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SquareProductCard, { imgUrl: "path/to/item2.jpg", altText: "Product image 2", title: "Product Name 2", price: "¥2,000", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SquareProductCard, { imgUrl: "path/to/item3.jpg", altText: "Product image 3", title: "Product Name 3", price: "¥3,000", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto py-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#333] mb-6", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "商品一覧"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(SquareProductCard, { imgUrl: "path/to/item1.jpg", altText: "商品画像1", title: "商品名1", price: "¥1,000", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(SquareProductCard, { imgUrl: "path/to/item2.jpg", altText: "商品画像2", title: "商品名2", price: "¥2,000", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(SquareProductCard, { imgUrl: "path/to/item3.jpg", altText: "商品画像3", title: "商品名3", price: "¥3,000", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(SquareProductCard, { imgUrl: "path/to/item4.jpg", altText: "商品画像4", title: "商品名4", price: "¥4,000", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })))); }