Layout extraction refactoring

2021-03-18 14:18:29 +01:00
parent eafad585fc
commit a3ae493c25
5 changed files with 120 additions and 115 deletions
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -0,0 +1,52 @@
+import { FC } from "react";
+import { Flex, VStack, Button, Link } from "@chakra-ui/react";
+import Head from "next/head";
+import Header from "./Header";
+import Footer from "./Footer";
+
+type Props = {
+    customTitle?: string
+    [key: string]: any
+};
+
+const title = "Lingva Translate";
+
+const Layout: FC<Props> = ({ customTitle, children }) => (
+    <>
+        <Head>
+            <title>
+                {customTitle ?? title}
+            </title>
+            <link rel="icon" href="/favicon.svg" />
+        </Head>
+
+        <Button
+            as={Link}
+            href="#main"
+            userSelect="none"
+            position="absolute"
+            top="-100px"
+            left="0"
+            _focus={{
+                top: "0"
+            }}
+        >
+            Skip to content
+        </Button>
+
+        <VStack minH="100vh" spacing={8}>
+            <Header />
+            <Flex
+                as="main"
+                id="main"
+                flexGrow={1}
+                w="full"
+            >
+                {children}
+            </Flex>
+            <Footer />
+        </VStack>
+    </>
+);
+
+export default Layout;