noogle/pages/_app.tsx

63 lines
1.8 KiB
TypeScript
Raw Normal View History

2022-11-26 12:36:08 +03:00
import * as React from "react";
import type { AppProps } from "next/app";
import { CacheProvider, EmotionCache } from "@emotion/react";
import { ThemeProvider, CssBaseline, createTheme } from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";
2022-12-18 19:31:42 +03:00
import { SnackbarProvider } from "notistack";
2022-11-26 12:36:08 +03:00
import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import createEmotionCache from "../createEmotionCache";
import { lightThemeOptions, darkThemeOptions } from "../styles/theme";
import "../styles/globals.css";
import { Layout } from "../components/layout";
import Head from "next/head";
interface MyAppProps extends AppProps {
emotionCache?: EmotionCache;
}
const clientSideEmotionCache = createEmotionCache();
const lightTheme = createTheme(lightThemeOptions);
const darkTheme = createTheme(darkThemeOptions);
const MyApp: React.FunctionComponent<MyAppProps> = (props) => {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
const getContent = () => {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
};
return (
<>
<Head>
<title>noogle</title>
<meta name="description" content="Search nix functions" />
<link rel="icon" href="/favicon.png" />
</Head>
<CacheProvider value={emotionCache}>
<ThemeProvider theme={userPrefersDarkmode ? darkTheme : lightTheme}>
<CssBaseline />
2022-12-18 19:31:42 +03:00
<SnackbarProvider
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
maxSnack={1}
>
{getContent()}
</SnackbarProvider>
2022-11-26 12:36:08 +03:00
</ThemeProvider>
</CacheProvider>
</>
);
};
export default MyApp;