function ProductPage({ name, price, description, reviews, image }) { return /*#__PURE__*/ React.createElement("div", { className: "max-w-[400px] p-4 shadow-lg rounded-lg bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: `画像 - ${name}`, className: "w-full h-[200px] object-cover rounded-t-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-crimson-text", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#ff6f61] font-semibold", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, price, " 円"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, description), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, reviews.map((review, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "my-2", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, review.author), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, review.text)))))); } function ProductPageStory() { const product1 = { name: "おしゃれな椅子", price: 12000, description: "快適でおしゃれな椅子です。", reviews: [ { author: "山田太郎", text: "とても快適です！" }, { author: "田中花子", text: "デザインが素敵です。" } ], image: "./images/chair1.jpg" }; const product2 = { name: "モダンなテーブル", price: 15000, description: "シンプルでモダンなデザインのテーブルです。", reviews: [ { author: "佐藤次郎", text: "とても頑丈です。" }, { author: "加藤美咲", text: "サイズが丁度良いです。" } ], image: "./images/table1.jpg" }; return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProductPage, { ...product1, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProductPage, { ...product2, __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); } function FundraisingPage({ title, sponsors }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white min-h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center py-10", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold text-[#121212] font-crimson-text", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, title)), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[1200px] mx-auto px-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-semibold text-[#121212] font-crimson-text mb-8", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "スポンサー一覧"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, sponsors.map((sponsor, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-6 border rounded-lg shadow-lg hover:bg-gray-100 transition duration-300", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: sponsor.logo, alt: `スポンサー${index + 1}のロゴ`, className: "w-[200px] h-[200px] mx-auto mb-4 object-contain", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-medium text-[#121212] font-crimson-text", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, sponsor.name)))))); } function FundraisingPageStory() { const sponsors = [ { name: '架空スポンサー1', logo: './sponsor1.png' }, { name: '架空スポンサー2', logo: './sponsor2.png' }, { name: '架空スポンサー3', logo: './sponsor3.png' }, { name: '架空スポンサー4', logo: './sponsor4.png' }, { name: '架空スポンサー5', logo: './sponsor5.png' }, { name: '架空スポンサー6', logo: './sponsor6.png' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FundraisingPage, { title: "募金ページ", sponsors: sponsors, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function MainComponent() { const [showFundraisingPopup, setShowFundraisingPopup] = React.useState(false); const [showProductPopup, setShowProductPopup] = React.useState(false); const [images, setImages] = React.useState([]); const [translatedText, setTranslatedText] = React.useState(''); React.useEffect(()=>{ fetch('/integrations/stable-diffusion/?prompt=おしゃれなカフェ', { method: 'GET' }).then((response)=>response.json()).then((data)=>setImages(data.data)); }, []); const handleTranslate = ()=>{ fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: 'おしゃれなカフェ', target: 'en' }) }).then((response)=>response.json()).then((data)=>setTranslatedText(data.data.translations[0].translatedText)); }; const handleQRCode = ()=>{ fetch('/integrations/qr-code/generatebasicbase64?data=https%3A%2F%2Fwww.google.com', { method: 'GET' }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#ffa500]", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold text-[#121212] font-crimson-text text-center py-10", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "おしゃれなカフェ")), /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowFundraisingPopup(true), className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "募金")), /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProductPopup(true), className: "bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "商品ページ")), showFundraisingPopup ? /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg max-w-[600px] w-full", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowFundraisingPopup(false), className: "bg-red-500 text-white px-2 py-1 rounded absolute top-4 right-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "閉じる"), /*#__PURE__*/ React.createElement(FundraisingPage, { title: "募金ページ", sponsors: [ { name: '架空スポンサー1', logo: './sponsor1.png' }, { name: '架空スポンサー2', logo: './sponsor2.png' }, { name: '架空スポンサー3', logo: './sponsor3.png' }, { name: '架空スポンサー4', logo: './sponsor4.png' }, { name: '架空スポンサー5', logo: './sponsor5.png' }, { name: '架空スポンサー6', logo: './sponsor6.png' } ], __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }))) : null, showProductPopup ? /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg max-w-[600px] w-full", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowProductPopup(false), className: "bg-red-500 text-white px-2 py-1 rounded absolute top-4 right-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "閉じる"), /*#__PURE__*/ React.createElement(ProductPageStory, { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }))) : null, /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, className: "bg-yellow-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Translate"), translatedText && /*#__PURE__*/ React.createElement("p", { className: "text-2xl mt-4 font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 28 }, __self: this }, translatedText)), /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleQRCode, className: "bg-purple-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Generate QR Code"))); }