function RoundedButton({ text, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "bg-[#E4E2DF] text-[#161616] rounded-[8px] px-4 py-2 font-nunito-sans text-sm hover:bg-[#CDCBC8] transition-colors duration-300", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function RoundedButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RoundedButton, { text: "Submit", onClick: ()=>alert('Form submitted!'), __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RoundedButton, { text: "Cancel", onClick: ()=>alert('Action cancelled!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [language, setLanguage] = React.useState('ja'); const [selectedGroup, setSelectedGroup] = React.useState(''); const [selectedLab, setSelectedLab] = React.useState(''); const [labList, setLabList] = React.useState([]); const [visitations, setVisitations] = React.useState([]); React.useEffect(()=>{ fetchLabList(); }, []); React.useEffect(()=>{ if (selectedLab) { fetchVisitations(); } }, [ selectedLab ]); const fetchLabList = async ()=>{ const response = await fetch('/api/db/lablist', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `laboratories`' }) }); const data = await response.json(); setLabList(data); }; const fetchVisitations = async ()=>{ const response = await fetch('/api/db/lablist', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `visitations` WHERE `lab_id` = ?', values: [ selectedLab ] }) }); const data = await response.json(); setVisitations(data); }; const getGroupName = (group)=>{ if (language === 'en') { switch(group){ case 'メディカルサイエンス群': return 'Medical Sciences Group'; case '情報生命科学群': return 'Computational Biology Group'; case '医療イノベーションコース': return 'Bioinnovation Course'; default: return group; } } return group; }; const groups = [ ...new Set(labList.map((lab)=>lab.group)) ]; const filteredLabs = labList.filter((lab)=>!selectedGroup || lab.group === selectedGroup); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-white text-[#161616] font-nunito-sans", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[url('https://images.pexels.com/photos/9993872/pexels-photo-9993872.jpeg')] bg-cover bg-center h-64 flex items-end rounded-b-3xl", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gradient-to-t from-white to-transparent p-6", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-pt-serif text-4xl text-white mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, language === 'ja' ? '入試説明会研究室見学フォーム' : 'Laboratory Visit Form for Admission Information Session'), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-full p-1", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-full transition-colors duration-300 ${language === 'ja' ? 'bg-[#E4E2DF] text-[#161616]' : 'bg-white text-[#161616]'}`, onClick: ()=>setLanguage('ja'), __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "日本語"), /*#__PURE__*/ React.createElement("button", { className: `px-4 py-2 rounded-full transition-colors duration-300 ${language === 'en' ? 'bg-[#E4E2DF] text-[#161616]' : 'bg-white text-[#161616]'}`, onClick: ()=>setLanguage('en'), __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "English"))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto p-6 space-y-8", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 border border-[#E4E2DF]", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-pt-serif text-2xl mb-4", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, language === 'ja' ? 'グループを選択' : 'Select Group'), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border border-[#E4E2DF] rounded-md", value: selectedGroup, onChange: (e)=>setSelectedGroup(e.target.value), __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, language === 'ja' ? '全てのグループ' : 'All Groups'), groups.map((group)=>/*#__PURE__*/ React.createElement("option", { key: group, value: group, __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, getGroupName(group))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 border border-[#E4E2DF]", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-pt-serif text-2xl mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, language === 'ja' ? '研究室を選択' : 'Select Laboratory'), /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border border-[#E4E2DF] rounded-md", value: selectedLab, onChange: (e)=>setSelectedLab(e.target.value), __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, language === 'ja' ? '研究室を選択' : 'Select a laboratory'), filteredLabs.map((lab)=>/*#__PURE__*/ React.createElement("option", { key: lab.id, value: lab.id, __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, language === 'ja' ? lab.name_ja : lab.name_en)))), selectedLab && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6 border border-[#E4E2DF]", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-pt-serif text-2xl mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, language === 'ja' ? '利用可能な見学時間' : 'Available Visitation Times'), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, visitations.map((visit)=>/*#__PURE__*/ React.createElement("li", { key: visit.id, className: "flex items-center space-x-4 p-4 bg-gray-50 rounded-lg shadow transition-transform duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }, visit.method === 'Meet the Professor' && /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-tie text-3xl text-blue-500", __source: { fileName: "", lineNumber: 119, columnNumber: 63 }, __self: this }), visit.method === 'Zoom' && /*#__PURE__*/ React.createElement("i", { className: "fas fa-video text-3xl text-green-500", __source: { fileName: "", lineNumber: 120, columnNumber: 49 }, __self: this }), visit.method === 'ラボ訪問' && /*#__PURE__*/ React.createElement("i", { className: "fas fa-flask text-3xl text-purple-500", __source: { fileName: "", lineNumber: 121, columnNumber: 49 }, __self: this }), visit.method === 'メールで個別連絡' && /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope text-3xl text-red-500", __source: { fileName: "", lineNumber: 122, columnNumber: 53 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 124, columnNumber: 19 }, __self: this }, visit.method !== 'メールで個別連絡' && /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 126, columnNumber: 23 }, __self: this }, visit.date, " ", visit.start_time, " - ", visit.end_time), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 128, columnNumber: 21 }, __self: this }, language === 'ja' ? visit.method : visit.method === 'ラボ訪問' ? 'Lab Visit In Person' : visit.method), (visit.method === 'Meet the Professor' || visit.method === 'Zoom') && /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 130, columnNumber: 23 }, __self: this }, "Zoom URL: ", /*#__PURE__*/ React.createElement("a", { href: visit.zoom_url, className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 131, columnNumber: 35 }, __self: this }, visit.zoom_url)), visit.method === 'ラボ訪問' && /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 135, columnNumber: 23 }, __self: this }, language === 'ja' ? '集合場所' : 'Meeting Place', ": ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 136, columnNumber: 73 }, __self: this }, visit.meeting_place)), visit.method === 'メールで個別連絡' && /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 140, columnNumber: 23 }, __self: this }, "Email: ", /*#__PURE__*/ React.createElement("a", { href: `mailto:${visit.email}`, className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 141, columnNumber: 32 }, __self: this }, visit.email)))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white text-center p-6 mt-8 border-t border-[#E4E2DF]", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, "© 2024 ", language === 'ja' ? '入試説明会研究室見学フォーム' : 'Laboratory Visit Form for Admission Information Session'))); }