App.tsx

import {SiGithub} from '@icons-pack/react-simple-icons';
import {useCallback} from 'react';
import {
  App as AppBase,
  Button,
  Image,
  useRoute,
  useSetRouteCallback,
} from 'tinywidgets';
import {article, title} from './App.css';
import {SideNav} from './components/SideNav.tsx';
import {Home} from './pages/Home.tsx';
import {ROUTES} from './pages/index.ts';

export const App = () => (
  <AppBase
    title={Title}
    topNavRight={
      <Button
        icon={SiGithub}
        href="https://github.com/tinyplex/tinywidgets"
        variant="icon"
      />
    }
    sideNav={SideNav}
    main={Main}
  />
);

const Title = () => {
  const setRoute = useSetRouteCallback();
  const setHome = useCallback(() => setRoute('home'), [setRoute]);
  return (
    <h1 className={title} onClick={setHome}>
      <Image src="/favicon.svg" variant="logo" alt="TinyWidgets" />
      TinyWidgets
    </h1>
  );
};

const Main = () => {
  const route = useRoute();

  const Component = ROUTES[route]?.[1] ?? Home;
  return (
    <article className={article}>
      <Component />
    </article>
  );
};