/* App entry */
const { useState: useS } = React;

function App() {
  const [route, setRoute] = useS({ page: "entries", id: null });
  return (
    <div className="app">
      <Sidebar route={route} setRoute={setRoute} />
      <div className="main">
        <Topbar route={route} setRoute={setRoute} />
        <div className="content">
          {route.page === "entries" && !route.id && <EntriesList setRoute={setRoute} />}
          {route.page === "entries" && route.id && <EntryDetail id={route.id} setRoute={setRoute} />}
          {route.page === "works" && !route.id && <WorksList setRoute={setRoute} />}
          {route.page === "works" && route.id && <WorkDetail id={route.id} setRoute={setRoute} />}
          {route.page === "pieces" && <PiecesList setRoute={setRoute} />}
          {route.page === "contributors" && !route.id && <ContributorsList setRoute={setRoute} />}
          {route.page === "contributors" && route.id && <ContributorDetail id={route.id} setRoute={setRoute} />}
          {route.page === "assets" && <AssetsScreen setRoute={setRoute} />}
          {route.page === "raccolte" && !route.id && <RaccolteList setRoute={setRoute} />}
          {route.page === "raccolte" && route.id && <RaccoltaDetail id={route.id} setRoute={setRoute} />}
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);