feat: Creates and uses shared Footer component

echobind · Oct 18, 2021 · 772a792 · 772a792
1 parent aafe8eb
commit 772a792
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>
  );
 }