Added files and folders into /src directory.

2022-04-22 20:58:15 -05:00
parent 17d90ce958
commit 436f79b933
24 changed files with 11 additions and 11 deletions
--- a/src/theme/layout/Footer.tsx
+++ b/src/theme/layout/Footer.tsx
@@ -0,0 +1,114 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import {
+  Box,
+  Text,
+  VStack,
+  Link,
+  HStack,
+  // Image,
+  Button,
+  BoxProps
+} from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+// import BackToTopButton from "./BackToTopButton";
+import { motion } from "framer-motion";
+
+export const MotionBox = motion<BoxProps>(Box);
+
+const Footer = (): JSX.Element => {
+  // const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
+  // const lastScroll = useRef<number>(0);
+
+  // const handleScroll = (): void => {
+  //   if (window.scrollY >= 500) {
+  //     setShowBackToTop(true);
+  //   } else {
+  //     setShowBackToTop(false);
+  //   }
+
+  //   const currentScroll =
+  //     window.pageYOffset || document.documentElement.scrollTop;
+
+  //   lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
+  // };
+
+  // useEffect(() => {
+  //   if (!window) {
+  //     console.log("waiting for mount");
+  //   } else if (window) {
+  //     window.addEventListener("scroll", handleScroll);
+  //   }
+
+  //   return () => window.removeEventListener("scroll", handleScroll);
+  // }, []);
+  return (
+    <Box bg="brand.footer" as="footer" w="100%" h="auto">
+      {/* <BackToTopButton show={showBackToTop} /> */}
+      <VStack
+        h="auto"
+        w="auto"
+        py={12}
+        spacing={5}
+        justifyItems="center"
+        justifyContent="center"
+      >
+        <VStack spacing={4}>
+          {/* <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+            <Link
+              href="https://github.com/LucidCreationsMedia"
+              target="_blank"
+              rel="noopener"
+            >
+              <Button
+                color="whiteAlpha"
+                variant="credits"
+                leftIcon={<Icon icon="akar-icons:github-fill" />}
+              >
+                View Codebase
+              </Button>
+            </Link>
+          </MotionBox> */}
+          <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+            <Link
+              href="https://lucidcreations.media/introducing-code-name-potty-chart/"
+              target="_blank"
+              rel="noopener"
+            >
+              <Button color="whiteAlpha" variant="credits">
+                More About This App
+              </Button>
+            </Link>
+          </MotionBox>
+          <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+            <Link
+              href="https://www.patreon.com/bePatron?u=15380906"
+              target="_blank"
+              rel="noopener"
+            >
+              <Button
+                color="whiteAlpha"
+                variant="patreon"
+                leftIcon={<Icon icon="ri:patreon-fill" />}
+              >
+                Fund This App
+              </Button>
+            </Link>
+          </MotionBox>
+          <Text color="brand.footerText" fontSize="xs">
+            &copy;
+            {` 2021 - ${new Date().getFullYear()} `}
+            <Link
+              href="https://lucidcreations.media"
+              rel="noopener"
+              target="_blank"
+            >
+              {"Lucid Creations Media"}
+            </Link>
+          </Text>
+        </VStack>
+      </VStack>
+    </Box>
+  );
+};
+
+export default Footer;