1  import "../styles/globals.css";
 2  import { Quicksand } from "next/font/google";
 3  import { ChakraProvider } from "@chakra-ui/react";
 4  import { extendTheme } from "@chakra-ui/react";
 5  import dynamic from 'next/dynamic';
 6  
 7  const quicksand = Quicksand({ subsets: ["latin"] });
 8  
 9  const colors = {
10    brand: {
11      900: "#1a365d",
12      800: "#153e75",
13      700: "#2a69ac",
14    },
15  };
16  
17  const fonts = {
18    heading: "var(--font-quicksand)",
19    body: "var(--font-quicksand)",
20  };
21  const components = {
22    Button: {
23      defaultProps: {
24        size: "sm",
25      },
26    },
27    Select: {
28      defaultProps: {
29        size: "sm",
30      },
31    },
32    Input: {
33      defaultProps: {
34        size: "sm",
35      },
36    },
37    Avatar: {
38      defaultProps: {
39        size: "sm",
40      },
41    },
42  };
43  
44  const styles = {
45    global: {
46      html: {
47        backgroundColor: "#dadada",
48      },
49      body: {
50        backgroundColor: "#dadada",
51      },
52    },
53  };
54  
55  export const theme = extendTheme({ styles, colors, fonts, components });
56  
57  const RepositoryProvider = dynamic(() => import("../service/repository"), {
58    ssr: false,
59  });
60  
61  export default function App({ Component, pageProps }) {
62    return (
63      <main className={quicksand.className}>
64        {/* <RepositoryProvider> */}
65          <ChakraProvider theme={theme}>
66            <Component {...pageProps} />
67          </ChakraProvider>
68        {/* </RepositoryProvider> */}
69      </main>
70    );
71  }