add main layout

Hartaithan · Mar 19, 2023 · 1c35d05 · 1c35d05
1 parent 6dc1d72
commit 1c35d05
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 3 deletions.
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
@@ -0,0 +1,21 @@
+import { Container } from "@mantine/core";
+import Head from "next/head";
+import { type PropsWithChildren, type FC } from "react";
+
+const MainLayout: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <>
+      <Head>
+        <title>Trophy Hunt</title>
+        <meta name="description" content="Booky — Мобильное приложение" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.svg" />
+      </Head>
+      <Container w="100%" h="100%">
+        {children}
+      </Container>
+    </>
+  );
+};
+
+export default MainLayout;
diff --git a/models/ThemeModel.ts b/models/ThemeModel.ts
@@ -0,0 +1,5 @@
+import { type MantineTheme } from "@mantine/core";
+
+export type DefaultProps<P> =
+  | Partial<P>
+  | ((theme: MantineTheme) => Partial<P>);
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -10,6 +10,8 @@ import {
 import { getCookie, setCookie } from "cookies-next";
 import { type IExtendedInitialProps, type IAppProps } from "@/models/AppModel";
 import { type GetServerSidePropsContext } from "next";
+import MainLayout from "@/layouts/MainLayout";
+import theme from "@/styles/theme";
 
 type NullableScheme = ColorScheme | null;
 
@@ -50,11 +52,14 @@ const App = (props: IAppProps): JSX.Element => {
         withGlobalStyles
         withNormalizeCSS
         theme={{
+          ...theme,
           colorScheme,
           fontFamily: inter.style.fontFamily,
         }}
       >
-        <Component {...pageProps} />
+        <MainLayout>
+          <Component {...pageProps} />
+        </MainLayout>
       </MantineProvider>
     </ColorSchemeProvider>
   );

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,8 +1,12 @@
 import { type IPage } from "@/models/AppModel";
-import { Title } from "@mantine/core";
+import { Flex, Title } from "@mantine/core";
 
 const Home: IPage = () => {
-  return <Title>Hello world!</Title>;
+  return (
+    <Flex h="100%" justify="center" align="center">
+      <Title>Hello world!</Title>
+    </Flex>
+  );
 };
 
 export default Home;
diff --git a/styles/theme.ts b/styles/theme.ts
@@ -0,0 +1,17 @@
+import { type DefaultProps } from "@/models/ThemeModel";
+import { type ContainerProps, type MantineThemeOverride } from "@mantine/core";
+
+const ContainerDefaultProps: DefaultProps<ContainerProps> = ({ spacing }) => ({
+  size: "xl",
+  px: { base: spacing.xs, xl: 0 },
+});
+
+const theme: MantineThemeOverride = {
+  components: {
+    Container: {
+      defaultProps: ContainerDefaultProps,
+    },
+  },
+};
+
+export default theme;