init

2023-03-16 11:56:41 +00:00
commit 1dcb2b6c3d
49 changed files with 14668 additions and 0 deletions
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -0,0 +1,42 @@
+import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+import { getCookie, setCookie } from "cookies-next";
+import NextApp, { AppContext, AppProps } from "next/app";
+import Head from "next/head";
+import { useState } from "react";
+
+export default function App(props: AppProps & { colorScheme: ColorScheme }) {
+  const { Component, pageProps } = props;
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(props.colorScheme);
+
+  const toggleColorScheme = (value?: ColorScheme) => {
+    const nextColorScheme = value || (colorScheme === "dark" ? "light" : "dark");
+    setColorScheme(nextColorScheme);
+    setCookie("mantine-color-scheme", nextColorScheme, { maxAge: 60 * 60 * 24 * 30 });
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Mantine next example</title>
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+        <link rel="shortcut icon" href="/favicon.svg" />
+      </Head>
+
+      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+        <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
+          <Component {...pageProps} />
+          <Notifications />
+        </MantineProvider>
+      </ColorSchemeProvider>
+    </>
+  );
+}
+
+App.getInitialProps = async (appContext: AppContext) => {
+  const appProps = await NextApp.getInitialProps(appContext);
+  return {
+    ...appProps,
+    colorScheme: getCookie("mantine-color-scheme", appContext.ctx) || "dark",
+  };
+};