From d55e41f4a9b436d1b7c3f9c89e62d57d0e9a4043 Mon Sep 17 00:00:00 2001
From: nelson frank <nelsonfr78@outlook.com>
Date: Fri, 27 May 2022 14:39:37 +0300
Subject: [PATCH] feat: Add Layout wrapper component

---
 pages/_app.tsx       | 13 +++++++++----
 ui/layout/Layout.tsx | 19 +++++++++++++++++++
 ui/layout/index.tsx  |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 ui/layout/Layout.tsx
 create mode 100644 ui/layout/index.tsx

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3f5c9d5..eadb424 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,8 +1,13 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import Layout from "../ui/layout";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/ui/layout/Layout.tsx b/ui/layout/Layout.tsx
new file mode 100644
index 0000000..ac14d67
--- /dev/null
+++ b/ui/layout/Layout.tsx
@@ -0,0 +1,19 @@
+import { Container, Typography } from '@mui/material'
+import { Box } from '@mui/system'
+import React from 'react'
+
+interface LayoutProps {
+    children: JSX.Element
+}
+const Layout = ({ children }: LayoutProps) => {
+    return (
+        <Container maxWidth="sm">
+            <Box textAlign="center" mt={5}>
+                <Typography variant='h2' fontWeight="bold">Quiz App</Typography>
+                {children}
+            </Box>
+        </Container>
+    )
+}
+
+export default Layout
\ No newline at end of file
diff --git a/ui/layout/index.tsx b/ui/layout/index.tsx
new file mode 100644
index 0000000..885ac1f
--- /dev/null
+++ b/ui/layout/index.tsx
@@ -0,0 +1 @@
+export { default } from './Layout'
\ No newline at end of file