import React , { lazy , Suspense } from 'react' ; import { useRoute } from 'wouter' ; import PageShell from './PageShell' ; import ThemeAdapter from './components/ThemeAdapter' ; import Home from './Home' ; import PAGES from './pages' ; import FullLoader from './components/FullLoader' ; import { EnvironmentAdapter } from './components/Environment' ; import { Toaster } from 'react-hot-toast' ; const DemoPageShell = lazy ( ( ) => import ( './DemoPageShell' ) ) ; interface InternalParams extends Record < string , string > { id : string ; } function Internal ( ) { const [ match , params ] = useRoute < InternalParams > ( '/patterns/:id' ) ; if ( match && params ) { return ( < PageShell > < Suspense fallback = { < FullLoader / > } > < DemoPageShell id = { params . id } title = { PAGES [ params . id ] . title } code = { PAGES [ params . id ] . code } / > < /Suspense> < /PageShell>); } return ( < PageShell > < Home /> < /PageShell>); } export default function App ( ) { return ( < EnvironmentAdapter > < ThemeAdapter > < Internal /> < /ThemeAdapter> < Toaster position = "bottom-left" / > < /EnvironmentAdapter>); }