Creates and uses shared Footer component

echobind · Oct 18, 2021 · c7a3825 · c7a3825
1 parent aafe8eb
commit c7a3825
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/packages/create-bison-app/template/components/Footer.tsx b/packages/create-bison-app/template/components/Footer.tsx
@@ -0,0 +1,22 @@
+import { Center, Flex, Text } from '@chakra-ui/layout';
+
+import { Logo } from './Logo';
+
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <Center as="footer" mt="auto" py={4}>
+      <Flex flexDirection="column" alignItems="center">
+        <Logo />
+        <Text as="em" textAlign="center">
+          Copyright Ⓒ {year}{' '}
+          <a href="https://echobind.com" target="_blank" rel="noopener noreferrer">
+            Echobind LLC.
+          </a>{' '}
+          All rights reserved.
+        </Text>
+      </Flex>
+    </Center>
+  );
+}
diff --git a/packages/create-bison-app/template/layouts/LoggedIn.tsx b/packages/create-bison-app/template/layouts/LoggedIn.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { useRouter } from 'next/router';
-import { Box, Center, Flex, Text, Button } from '@chakra-ui/react';
+import { Box, Flex, Button } from '@chakra-ui/react';
 
 import { Logo } from '../components/Logo';
 import { Nav } from '../components/Nav';
 import { useAuth } from '../context/auth';
+import { Footer } from '../components/Footer';
 
 interface Props {
   children: React.ReactNode;
@@ -43,18 +44,7 @@ export function LoggedInLayout({ children }: Props) {
         {children}
       </Box>
 
-      <Center as="footer" mt="auto" py={4}>
-        <Flex flexDirection="column" alignItems="center">
-          <Logo />
-          <Text as="i" textAlign="center">
-            Copyright Ⓒ 2020{' '}
-            <a href="https://echobind.com" target="_blank" rel="noopener noreferrer">
-              Echobind LLC.
-            </a>{' '}
-            All rights reserved.
-          </Text>
-        </Flex>
-      </Center>
+      <Footer />
     </Flex>
   );
 }
diff --git a/packages/create-bison-app/template/layouts/LoggedOut.tsx b/packages/create-bison-app/template/layouts/LoggedOut.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Box, Center, Flex, Text, Button } from '@chakra-ui/react';
+import { Box, Flex, Button } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
 import { Logo } from '../components/Logo';
+import { Footer } from '../components/Footer';
 
 interface Props {
   children: React.ReactNode;
@@ -27,18 +28,7 @@ export function LoggedOutLayout({ children }: Props) {
         {children}
       </Box>
 
-      <Center as="footer" mt="auto" py={4}>
-        <Flex flexDirection="column" alignItems="center">
-          <Logo />
-          <Text as="i" textAlign="center">
-            Copyright Ⓒ 2020{' '}
-            <a href="https://echobind.com" target="_blank" rel="noopener noreferrer">
-              Echobind LLC.
-            </a>{' '}
-            All rights reserved.
-          </Text>
-        </Flex>
-      </Center>
+      <Footer />
     </Flex>
   );
 }