Function MyApp

examples/rsp-next-ts/pages/_app.tsx:26–74

({Component, pageProps}: AppProps)

}

function MyApp({Component, pageProps}: AppProps) {
  const [theme, setTheme] = useState<ColorScheme>('light');

  let router = useRouter();
  let themeIcons = {dark: <Moon />, light: <Light />};
  let otherTheme: ColorScheme = theme === 'light' ? 'dark' : 'light';
  enableTableNestedRows();

  return (
    <>
      <Script id="font-loading">
        {`(function(d) {
            var config = {
              kitId: 'uei1lip',
              scriptTimeout: 3000,
              async: true
            },
            h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
          })(document);`}
      </Script>
      <Provider
        theme={lightTheme}
        colorScheme={theme}
        router={{
          navigate: (href, opts) => router.push(href, undefined, opts),
          useHref: (href: string) => router.basePath + href
        }}
        locale="en">
        <Grid
          areas={['header', 'content']}
          columns={['1fr']}
          rows={['size-200', 'auto']}
          gap="size-100">
          <Flex direction="row" gap="size-100" justifyContent="end" margin="size-100">
            <ActionButton
              aria-label={`Switch to ${otherTheme} mode.`}
              onPress={() => setTheme(otherTheme)}>
              {themeIcons[otherTheme]}
            </ActionButton>
          </Flex>
          <View>
            <Component {...pageProps} />
          </View>
        </Grid>
        <ToastContainer />
      </Provider>
    </>
  );
}
export default MyApp;