function MainComponent() { const categories = [ "ピアス", "ネックレス", "ブレスレット" ]; const [selectedCategory, setSelectedCategory] = React.useState(categories[0]); return /*#__PURE__*/ React.createElement("div", { className: "h-screen bg-[#F5F5DC] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-8 text-[#6A5ACD]", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, "ハンドメイドアクセサリーオンラインショップ"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around w-full max-w-4xl mb-6", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, categories.map((category, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setSelectedCategory(category), className: `px-6 py-2 rounded-full font-roboto text-sm ${selectedCategory === category ? "bg-[#FFB6C1] text-white" : "bg-white border border-[#FFB6C1] text-[#6A5ACD]"}`, __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, category))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[220px] h-[300px] bg-white shadow-lg rounded-lg flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./earrings.jpg", alt: "Handmade earrings", className: "w-[150px] h-[150px] object-cover rounded-full", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "ピアス"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-4 py-2 bg-[#FFB6C1] text-white rounded-full", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "購入する")), /*#__PURE__*/ React.createElement("div", { className: "w-[220px] h-[300px] bg-white shadow-lg rounded-lg flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./necklace.jpg", alt: "Handmade necklace", className: "w-[150px] h-[150px] object-cover rounded-full", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "ネックレス"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-4 py-2 bg-[#FFB6C1] text-white rounded-full", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "購入する")), /*#__PURE__*/ React.createElement("div", { className: "w-[220px] h-[300px] bg-white shadow-lg rounded-lg flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./bracelet.jpg", alt: "Handmade bracelet", className: "w-[150px] h-[150px] object-cover rounded-full", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "ブレスレット"), /*#__PURE__*/ React.createElement("button", { className: "mt-auto px-4 py-2 bg-[#FFB6C1] text-white rounded-full", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "購入する"))), /*#__PURE__*/ React.createElement("form", { className: "mt-8 py-4 px-8 rounded-lg bg-white shadow-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#6A5ACD] mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "決済方法を選択してください"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "creditCard", name: "paymentMethod", value: "creditCard", className: "mr-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "creditCard", className: "font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "クレジットカード")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", id: "bankTransfer", name: "paymentMethod", value: "bankTransfer", className: "mr-2", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "bankTransfer", className: "font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "銀行振込")))); }