demo: add footer

Author: frysztak

example/components/Footer.tsx

@@ -0,0 +1,17 @@
+import { HStack, Link, Text } from '@chakra-ui/core';
+import { Github } from '@emotion-icons/boxicons-logos/Github';
+import * as React from 'react';
+
+export function Footer() {
+  return (
+    <HStack margin={4} justify="space-between">
+      <Link href="https://github.com/frysztak/use-debounced-loader">
+        <HStack>
+          <Github size="24px" />
+          <Text>GitHub</Text>
+        </HStack>
+      </Link>
+      <Text fontSize="sm">Sebastian Frysztak, 2020</Text>
+    </HStack>
+  );
+}

example/index.tsx

@@ -1,8 +1,9 @@
 import 'react-app-polyfill/ie11';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { ChakraProvider, extendTheme } from '@chakra-ui/core';
+import { Box, ChakraProvider, extendTheme, Flex } from '@chakra-ui/core';
 import { LoaderDemo } from './LoaderDemo';
+import { Footer } from './components/Footer';
 
 const config = {
   useSystemColorMode: false,
@@ -13,9 +14,13 @@ const customTheme = extendTheme({ config });
 const App = () => {
   return (
     <ChakraProvider theme={customTheme}>
-      <div>
-        <LoaderDemo />
-      </div>
+      <Flex minH="100vh" flexDirection="column">
+        <Box flexGrow={1}>
+          <LoaderDemo />
+        </Box>
+
+        <Footer />
+      </Flex>
     </ChakraProvider>
   );
 };

example/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@chakra-ui/core": "^1.0.0-rc.8",
+    "@emotion-icons/boxicons-logos": "^2.10.0",
     "framer-motion": "^2.9.4",
     "react-app-polyfill": "^1.0.0",
     "react-timing-hooks": "^2.0.0",