function ReviewDisplayComponent({ reviews }) { return /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, reviews.map((review)=>/*#__PURE__*/ React.createElement("div", { key: review.id, className: "mb-4 p-4 border rounded shadow-sm", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "ユーザID: ", review.user_id), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, review.content)))); } function ReviewDisplayComponentStory() { const [reviews, setReviews] = React.useState([]); React.useEffect(()=>{ fetch('/api/db/review_db', { method: 'POST', body: JSON.stringify({ query: 'SELECT `id`, `user_id`, `content` FROM `reviews` ORDER BY `id` DESC', values: [] }) }).then((response)=>response.json()).then((data)=>{ setReviews(data); }); }, []); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ReviewDisplayComponent, { reviews: reviews, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function MainComponent() { const [imageURL, setImageURL] = React.useState(''); const [loading, setLoading] = React.useState(false); const [reviews, setReviews] = React.useState([]); const [chatLoading, setChatLoading] = React.useState(false); const [serviceDetails, setServiceDetails] = React.useState([ { service: 'カット', price: '¥3,000' }, { service: 'カラー', price: '¥5,000' }, { service: 'パーマ', price: '¥6,000' }, { service: 'シャンプー', price: '¥1,000' } ]); const [accessInfo, setAccessInfo] = React.useState({ address: '', phone: '', mapEmbed: '' }); React.useEffect(()=>{ const fetchImage = async ()=>{ setLoading(true); const response = await fetch('/integrations/stable-diffusion/?prompt=stylish+woman+with+fancy+hair', { method: 'GET' }); const data = await response.json(); setImageURL(data.data[0]); setLoading(false); }; const fetchAccessInfo = async ()=>{ const response = await fetch('/integrations/google-place-autocomplete/autocomplete/json?input=hair+salon&radius=500', { method: 'GET' }); const data = await response.json(); if (data.predictions.length > 0) { setAccessInfo({ address: data.predictions[0].description, phone: '123-456-7890', mapEmbed: `https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=${encodeURIComponent(data.predictions[0].description)}` }); } }; fetchImage(); fetchAccessInfo(); }, []); const headerLinks = [ { name: 'ホーム', href: '#' }, { name: 'サービス', href: '#services' }, { name: 'アクセス', href: '#access' }, { name: 'サポート', href: '#' } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-gray-800 text-white p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "ヘアサロン"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, headerLinks.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: "hover:underline", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, link.name))))))), /*#__PURE__*/ React.createElement("div", { className: `h-[600px] flex items-center justify-center bg-cover bg-center ${loading ? 'animate-pulse' : ''}`, style: { backgroundImage: `url('${imageURL}')` }, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-white text-3xl", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "最高のヘアサロン体験を")), /*#__PURE__*/ React.createElement("section", { id: "services", className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "サービス情報"), serviceDetails.map((detail, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, detail.service, ": ", detail.price))), /*#__PURE__*/ React.createElement("section", { id: "access", className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "アクセス情報"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "住所: ", accessInfo.address), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "電話番号: ", accessInfo.phone), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px]", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { className: "w-full h-full border-0", src: accessInfo.mapEmbed, allowFullScreen: true, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "顧客のレビュー"), chatLoading ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement(ReviewDisplayComponent, { reviews: reviews, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }))); }