pupil.brain.riken.jp/src/common/CenterColumn.tsx

import { Link, Route, Routes } from 'react-router';
import type { MultiLang } from '../config';
import DatabaseTop from '../database/DatabaseTop';
import styles from './CenterColumn.module.css';
import MainContent from './MainContent';

interface Props {
    lang: MultiLang;
}

const BreadCrumbs = () => {
    return (
        <div className={styles.breadclumbs}>
            <Link to="/">Home</Link>
            <Routes>
                <Route path="/database/*" element={<>&nbsp;&raquo;&nbsp;Database</>} />
                <Route path="/about" element={<>&nbsp;&raquo;&nbsp;About</>} />
                <Route path="*" element={null} />
            </Routes>
        </div>
    );
};

const CenterBlocks = (props: Props) => {
    const { lang } = props;
    return (
        <table className={styles.centerBlocks}>
            <tbody>
                <tr>
                    <td colSpan={2}>
                        <h2 className={styles.centerMainTitle}>Registered Itemtypes</h2>
                        <div className={styles.centerMainContent}>
                            <DatabaseTop lang={lang} />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td className={styles.centerLeftColumn}></td>
                    <td className={styles.centerRightColumn}></td>
                </tr>
            </tbody>
        </table>
    );
};

const CenterColumn = (props: Props) => {
    const { lang } = props;
    return (
        <td className={styles.centerColumn}>
            <BreadCrumbs />
            <Routes>
                <Route path="/" element={<CenterBlocks lang={lang} />} />
                <Route path="*" element={null} />
            </Routes>
            <MainContent lang={lang} />
        </td>
    );
};

export default CenterColumn;