import { Suspense } from 'react' ; import { ErrorBoundary } from 'react-error-boundary' ; import { OverlayProvider } from '@react-aria/overlays' ; import { BreakpointProvider } from './context/Breakpoint' ; import { ColorSchemeProvider } from './context/ColorScheme' ; import '~/services/screenFit' ; import { BrowserRouter , Routes , Route , Outlet } from '~/components/router/client' ; import { NavProgress } from '~/components/ui/NavProgress' ; import { PageError } from '~/routes/PageError' ; import { PageBlank } from '~/routes/PageBlank' ; import * as Page from '~/routes' ; import { PageNotFound } from '../routes/PageNotFound' ; import { Header } from './Header' ; import { Footer } from './Footer' ; import { styled } from '~/theme/stitches.config' ; import '~/routes/PageView' ; const LayoutContainer = styled ( 'div' , { display : 'flex' , flexDirection : 'column' , height : '100vh' , '& > *' : { flexShrink : 0 , } , } ) ; const Main = styled ( 'main' , { pt : '3rem' , } ) ; export const App = ( ) => ( < OverlayProvider > < BreakpointProvider > < ColorSchemeProvider > < BrowserRouter > < Routes > < Route path = "/" element = { < Layout / > } > < Route index element = { < Page . Home / > } /> < Route path = "/guide" element = { < Page . Guide / > } /> < Route path = "/download" element = { < Page . Download / > } /> < Route path = "/customize" element = { < Page . Customize / > } /> < Route path = "/browse/*" element = { < Page . Browse / > } /> < Route path = "/source" element = { < Page . Source / > } /> < Route path = "/frameworks" element = { < Page . Frameworks / > } /> < Route path = "/sponsors" element = { < Page . Sponsors / > } /> < Route path = "/license" element = { < Page . License / > } /> { } < Route path = "*" element = { < PageNotFound / > } /> < /Route> < /Routes> < /BrowserRouter> < /ColorSchemeProvider> < /BreakpointProvider> < /OverlayProvider>); const Layout = ( ) => ( < > < Header /> < LayoutContainer > < Main > < ErrorBoundary FallbackComponent = { PageError } > < Suspense fallback = { < PageBlank />}> < Outlet / > < /Suspense> < /ErrorBoundary> < /Main> < Footer / > < /LayoutContainer> < NavProgress / > < />);