import { useEffect, useRef } from 'react';
import { useRouter } from 'next/router';
import { i18n } from '@lingui/core';
import { I18nProvider } from '@lingui/react';
import { AppPropsWithLayout } from '@ts/types/app';
import { initTranslation } from '@utils/helpers/i18n';
import '../styles/globals.scss';
import { ThemeProvider } from 'next-themes';

initTranslation(i18n);

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const router = useRouter();
  const locale: string = router.locale || router.defaultLocale!;
  const firstRender = useRef(true);

  if (pageProps.translation && firstRender.current) {
    i18n.load(locale, pageProps.translation);
    i18n.activate(locale);
    firstRender.current = false;
  }

  useEffect(() => {
    if (pageProps.translation) {
      i18n.load(locale, pageProps.translation);
      i18n.activate(locale);
    }
  }, [locale, pageProps.translation]);

  const getLayout = Component.getLayout ?? ((page) => page);
  return (
    <I18nProvider i18n={i18n}>
      <ThemeProvider
        defaultTheme="system"
        enableColorScheme={true}
        enableSystem={true}
      >
        {getLayout(<Component {...pageProps} />)}
      </ThemeProvider>
    </I18nProvider>
  );
}

export default MyApp;
 personal website.</td><td class='sub right'>Armand Philippot</td></tr></table>
<table class='tabs'><tr><td>
<a href='/www.armandphilippot.com/about/'>about</a><a href='/www.armandphilippot.com/'>summary</a><a href='/www.armandphilippot.com/refs/?id=f5ba1046b13acd239c472e361f345902937662fb'>refs</a><a href='/www.armandphilippot.com/log/src/components/Icons/Hamburger/Hamburger.tsx'>log</a><a class='active' href='/www.armandphilippot.com/tree/src/components/Icons/Hamburger/Hamburger.tsx?id=f5ba1046b13acd239c472e361f345902937662fb'>tree</a><a href='/www.armandphilippot.com/commit/src/components/Icons/Hamburger/Hamburger.tsx?id=f5ba1046b13acd239c472e361f345902937662fb'>commit</a><a href='/www.armandphilippot.com/diff/src/components/Icons/Hamburger/Hamburger.tsx?id=f5ba1046b13acd239c472e361f345902937662fb'>diff</a><a href='/www.armandphilippot.com/stats/src/components/Icons/Hamburger/Hamburger.tsx'>stats</a></td><td class='form'><form class='right' method='get' action='/www.armandphilippot.com/log/src/components/Icons/Hamburger/Hamburger.tsx'>
<input type='hidden' name='id' value='f5ba1046b13acd239c472e361f345902937662fb'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/www.armandphilippot.com/tree/?id=f5ba1046b13acd239c472e361f345902937662fb'>root</a>/<a href='/www.armandphilippot.com/tree/src?id=f5ba1046b13acd239c472e361f345902937662fb'>src</a>/<a href='/www.armandphilippot.com/tree/src/components?id=f5ba1046b13acd239c472e361f345902937662fb'>components</a>/<a href='/www.armandphilippot.com/tree/src/components/Icons?id=f5ba1046b13acd239c472e361f345902937662fb'>Icons</a>/<a href='/www.armandphilippot.com/tree/src/components/Icons/Hamburger?id=f5ba1046b13acd239c472e361f345902937662fb'>Hamburger</a>/<a href='/www.armandphilippot.com/tree/src/components/Icons/Hamburger/Hamburger.tsx?id=f5ba1046b13acd239c472e361f345902937662fb'>Hamburger.tsx</a></div><div class='content'>blob: 9b39272bce6deed2d3e81e0b23c16fac077fb2ed (<a href='/www.armandphilippot.com/plain/src/components/Icons/Hamburger/Hamburger.tsx?id=f5ba1046b13acd239c472e361f345902937662fb'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
<a id='n9' href='#n9'>9</a>
<a id='n10' href='#n10'>10</a>
</pre></td>
<td class='lines'><pre><code>