Merge branch 'feature/footer' into development

Author: Rikthepixel

src/components/navigation/Footer.tsx

@@ -0,0 +1,91 @@
+import Link from "./Link";
+
+import Logo from "@/assets/images/brand/logo-200x200.webp";
+
+interface FooterProps {
+
+}
+
+const Footer = ({ }: FooterProps) => {
+  return (
+    <footer className="flex items-center justify-center text-primary-contrast">
+      <div className="flex flex-col w-full gap-4 p-8 max-w-7xl rounded-t-md bg-primary">
+        <div className="flex flex-col items-center gap-2 p-2 rounded-md bg-white/20 sm:flex-row">
+          <div className="flex items-center gap-2">
+            <img
+              className="w-12 h-12"
+              src={Logo.src}
+              width={Logo.width}
+              height={Logo.height}
+            />
+            <span className="font-semibold text-black">
+              Commit Rocket
+            </span>
+          </div>
+          <span className="hidden text-black/50 sm:block">
+            -
+          </span>
+          <div className="text-black/50">
+            © Rik den Breejen
+          </div>
+        </div>
+        <div className="flex flex-col justify-between w-full gap-8 md:flex-row">
+          <div className="flex flex-col">
+            <p className="mb-2 text-lg font-semibold">Commit Rocket</p>
+            <Link
+              color="white"
+              href="/blog"
+              title="Commit Rocket Blog"
+              underline
+            >
+              Blog
+            </Link>
+            <Link
+              color="white"
+              href="https://github.com/commit-rocket/commit-rocket"
+              title="Commit Rocket Source-Code"
+              underline
+              external
+            >
+              Github
+            </Link>
+          </div>
+          <div className="flex flex-col">
+            <p className="mb-2 text-lg font-semibold">Website</p>
+            <Link
+              color="white"
+              href="https://github.com/commit-rocket/commit-rocket-website"
+              title="Commit Rocket Website Source-Code"
+              underline
+              external
+            >
+              Frontend Source
+            </Link>
+            <Link
+              color="white"
+              href="https://github.com/commit-rocket/commit-rocket-website-backend"
+              title="Commit Rocket Website Backend Source-Code"
+              underline
+              external
+            >
+              Backend Source
+            </Link>
+          </div>
+          <div className="flex flex-col">
+            <p className="mb-2 text-lg font-semibold">More</p>
+            <Link
+              color="white"
+              href="/about"
+              title="About the creators of Commit Rocket"
+              underline
+            >
+              About Us
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/navigation/Link.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import InternalLink, { LinkProps as InternalLinkProps } from "next/link";
 import { cva, VariantProps as GetVariantProps } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
+import ArrowTopRightOnSquareIcon from "@heroicons/react/24/solid/ArrowTopRightOnSquareIcon";
 
 import { RequiredKeys } from "@/types/utility";
 
@@ -26,20 +27,26 @@ export type VariantProps = GetVariantProps<typeof style>;
 
 type LinkProps = {
   underline?: boolean;
+  external?: boolean;
 } & RequiredKeys<VariantProps, "color">
   & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps>
   & InternalLinkProps
   & React.RefAttributes<HTMLAnchorElement>;
 
-const Link = ({ className, color, underline, ...props }: LinkProps) => {
+const Link = ({ className, color, underline, children, external, hrefLang = "en", ...props }: LinkProps) => {
 
   const computedClassName = useMemo(
     () => twMerge(style({ color, underline }), className),
     [className, color, underline]
   );
 
   return (
-    <InternalLink className={computedClassName} {...props} />
+    <InternalLink className={computedClassName} hrefLang={hrefLang} {...props}>
+      {children}
+      {external && <ArrowTopRightOnSquareIcon
+        className="inline w-4 h-4"
+      />}
+    </InternalLink>
   );
 };
 

src/pages/_app.tsx

@@ -6,6 +6,7 @@ import Head from "next/head";
 
 import '@/styles/main.css';
 import Header from "@/components/navigation/Header";
+import Footer from "@/components/navigation/Footer";
 
 const openSans = Open_Sans({
   subsets: ['latin'],
@@ -49,7 +50,6 @@ export default function App({ Component, pageProps, router }: AppProps) {
       </Head>
       <div className={"flex flex-col overflow-auto scroll-smooth scroll-p-4 " + openSans.variable}>
         <Header />
-
         <AnimatePresence mode="wait">
           <motion.div
             key={router.pathname}
@@ -68,6 +68,7 @@ export default function App({ Component, pageProps, router }: AppProps) {
             />
           </motion.div>
         </AnimatePresence>
+        <Footer />
       </div>
     </MotionConfig>
   );