Mantine next example

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"; import { HeaderSearch } from "../components/Header/Header"; export default function App(props: AppProps & { colorScheme: ColorScheme }) { const { Component, pageProps } = props; const [colorScheme, setColorScheme] = useState(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 ( <> Mantine next example ); } App.getInitialProps = async (appContext: AppContext) => { const appProps = await NextApp.getInitialProps(appContext); return { ...appProps, colorScheme: getCookie("mantine-color-scheme", appContext.ctx) || "dark", }; };