import * as React from 'react';
import { Storage, Amplify } from 'aws-amplify';
import { useRouter } from 'next/router';
import Script from 'next/script';
import { ThemeProvider, ColorMode, defaultTheme } from '@aws-amplify/ui-react';
import MyStorageProvider from '@/utils/storageMock';
import { configure, trackPageVisit } from '@/utils/track';
import { Header } from '@/components/Layout/Header';
import { baseTheme } from '../theme';
import { mockConfig } from '../mockConfig';
import { Head } from './Head';
import Prism from 'prism-react-renderer/prism';
globalThis.Prism = Prism;
require('prismjs/components/prism-dart');
import '../styles/index.scss';
import classNames from 'classnames';
import { GlobalNav, NavMenuItem } from '@/components/Layout/GlobalNav';
import {
LEFT_NAV_LINKS,
RIGHT_NAV_LINKS,
SOCIAL_LINKS,
} from '@/data/globalnav';
if (typeof window === 'undefined') {
// suppress useLayoutEffect warnings when running outside a browser
// See: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85?permalink_comment_id=4150784#gistcomment-4150784
// @ts-ignore Cannot assign to 'useLayoutEffect' because it is a read-only property.ts(2540)
React.useLayoutEffect = () => {};
} else {
console.log(`
_____ _ _ ___ _____ _____
| _ |_____ ___| |_| _|_ _ | | | |
| | | . | | | _| | | | | |- -|
|__|__|_|_|_| _|_|_|_| |_ | |_____|_____|
|_| |___|
✨ you can explore the Amplify UI theme object by typing \`theme\` in the console.
`);
window['theme'] = defaultTheme;
Amplify.configure(mockConfig);
Storage.addPluggable(new MyStorageProvider('fast', { delay: 10 }));
Storage.addPluggable(new MyStorageProvider('slow', { delay: 1000 }));
Storage.addPluggable(
new MyStorageProvider('error', { delay: 50, networkError: true })
);
}
function MyApp({ Component, pageProps }) {
const [expanded, setExpanded] = React.useState(false);
const {
pathname,
query: { platform = 'react' },
} = useRouter();
const isHomepage = pathname === '/' || pathname === '/[platform]';
const [colorMode, setColorMode] = React.useState('system');
const handleColorModeChange = (colorMode: ColorMode) => {
setColorMode(colorMode);
if (colorMode !== 'system') {
localStorage.setItem('colorMode', colorMode);
} else {
localStorage.removeItem('colorMode');
}
// Algolia search renders in a Portal so we need to do this
document.documentElement.setAttribute('data-amplify-color-mode', colorMode);
};
React.useEffect(() => {
const colorModePreference = localStorage.getItem('colorMode') as ColorMode;
if (colorModePreference) {
setColorMode(colorModePreference);
}
document.documentElement.setAttribute(
'data-amplify-color-mode',
colorModePreference || 'system'
);
}, []);
React.useEffect(() => {
configure();
trackPageVisit();
}, [pathname]); // only track page visit if path has changed
return (
<>
);
}
export default MyApp;