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 [laboratories, setLaboratories] = React.useState([]); const [visitations, setVisitations] = React.useState([]); React.useEffect(()=>{ fetchLaboratories(); fetchVisitations(); }, []); const fetchLaboratories = async ()=>{ const response = await fetch('/api/db/lablist', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `laboratories`' }) }); const data = await response.json(); setLaboratories(data); }; const fetchVisitations = async ()=>{ const response = await fetch('/api/db/lablist', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `visitations`' }) }); 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 getMethodName = (method)=>{ if (language === 'en') { switch(method){ case 'ラボ訪問': return 'Lab Visit In Person'; case 'メールで個別連絡': return 'Contact by Email'; default: return method; } } return method; }; const groups = [ ...new Set(laboratories.map((lab)=>lab.group)) ]; const filteredLabs = selectedGroup ? laboratories.filter((lab)=>lab.group === selectedGroup) : laboratories; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-nunito-sans", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-cover bg-center h-64 flex items-end rounded-b-lg", style: { backgroundImage: "url('https://images.pexels.com/photos/9993872/pexels-photo-9993872.jpeg')" }, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 pb-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-pt-serif text-white drop-shadow-lg", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, language === 'ja' ? '入試説明会の研究室見学情報' : 'Laboratory Visit Information for Entrance Examination Briefing'))), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row justify-between items-center mb-8 bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-4 md:mb-0", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `cursor-pointer ${language === 'ja' ? 'font-bold' : ''}`, onClick: ()=>setLanguage('ja'), __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "日本語"), /*#__PURE__*/ React.createElement("div", { className: "w-12 h-6 bg-gray-300 rounded-full p-1 duration-300 ease-in-out cursor-pointer", onClick: ()=>setLanguage(language === 'ja' ? 'en' : 'ja'), __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out ${language === 'en' ? 'translate-x-6' : ''}`, __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: `cursor-pointer ${language === 'en' ? 'font-bold' : ''}`, onClick: ()=>setLanguage('en'), __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "English")), /*#__PURE__*/ React.createElement("select", { className: "bg-white border border-gray-300 rounded-md px-3 py-2 w-full md:w-auto", value: selectedGroup, onChange: (e)=>setSelectedGroup(e.target.value), __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, language === 'ja' ? 'すべてのグループ' : 'All Groups'), groups.map((group)=>/*#__PURE__*/ React.createElement("option", { key: group, value: group, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, getGroupName(group))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, filteredLabs.map((lab)=>/*#__PURE__*/ React.createElement("div", { key: lab.id, className: "bg-white rounded-lg overflow-hidden shadow-md border border-[#E4E2DF] transform transition duration-300 hover:scale-105", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-pt-serif font-bold mb-2 text-[#161616]", __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, language === 'ja' ? lab.name_ja : lab.name_en), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 17 }, __self: this }, getGroupName(lab.group)), /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2 text-[#161616]", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }, language === 'ja' ? '利用可能な見学時間' : 'Available Visit Times'), visitations.filter((v)=>v.lab_id === lab.id).map((visit)=>/*#__PURE__*/ React.createElement("div", { key: visit.id, className: "mb-4 bg-gray-50 p-3 rounded-md border-l-4 border-blue-500", __source: { fileName: "", lineNumber: 104, columnNumber: 19 }, __self: this }, visit.method !== 'メールで個別連絡' && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 106, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar-alt mr-2", __source: { fileName: "", lineNumber: 107, columnNumber: 25 }, __self: this }), visit.date, " ", visit.start_time, " - ", visit.end_time), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-semibold text-[#161616]", __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2", __source: { fileName: "", lineNumber: 112, columnNumber: 23 }, __self: this }), getMethodName(visit.method)), (visit.method === 'Meet the Professor' || visit.method === 'Zoom') && /*#__PURE__*/ React.createElement("a", { href: visit.zoom_url, target: "_blank", rel: "noopener noreferrer", className: "text-sm text-blue-600 hover:underline break-all", __source: { fileName: "", lineNumber: 116, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-video mr-2", __source: { fileName: "", lineNumber: 117, columnNumber: 25 }, __self: this }), language === 'ja' ? 'Zoom URLを開く' : 'Open Zoom URL'), visit.method === 'ラボ訪問' && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 122, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 25 }, __self: this }), visit.meeting_place), visit.method === 'メールで個別連絡' && /*#__PURE__*/ React.createElement("a", { href: `mailto:${visit.email}`, className: "text-sm text-blue-600 hover:underline break-all", __source: { fileName: "", lineNumber: 128, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope mr-2", __source: { fileName: "", lineNumber: 129, columnNumber: 25 }, __self: this }), visit.email)))))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white py-8 mt-16", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 text-center text-gray-600", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, "© 2024 Laboratory Visit Information System")))); }