silphius/app/react/components/devtools.jsx

import {useEffect} from 'react';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

import styles from './devtools.module.css';

import TabComponents from './devtools/components.js';

export default function Devtools({
  eventsChannel,
}) {
  useEffect(() => {
    if (import.meta.hot) {
      const updating = new Set(TabComponents.map(([path]) => path));
      import.meta.hot.on('vite:afterUpdate', ({updates}) => {
        if (updates.some(({path}) => updating.has(path))) {
          import.meta.hot.invalidate();
        }
      });
    }
  }, []);
  return (
    <div className={styles.devtools}>
      <Tabs>
        <TabList>
          {TabComponents.map(([path, {displayName}]) => <Tab key={path}>{displayName}</Tab>)}
        </TabList>
        {TabComponents.map(([path, TabComponent]) => (
          <TabPanel key={path}>
            <TabComponent
              eventsChannel={eventsChannel}
            />
          </TabPanel>
        ))}
      </Tabs>
    </div>
  );
}