Style up footer

Author: Rikthepixel

src/components/navigation/Footer.tsx

@@ -1,25 +1,87 @@
-import React from "react";
 import Link from "./Link";
 
+import Logo from "@/assets/images/brand/logo-200x200.webp";
+
 interface FooterProps {
 
 }
 
 const Footer = ({ }: FooterProps) => {
   return (
-    <footer className="flex gap-4 p-4 bg-primary text-primary-contrast">
-      <div>
-        <p className="text-lg font-semibold text-center">Contact:</p>
-        <div className="flex gap-2">
-          <span className="font-semibold">Feedback:</span>
-          <Link color="white" href="mailto:feedback@commitrocket.com" underline>feedback@commitrocket.com</Link>
+    <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>
-      <div>
-        <p className="text-lg font-semibold text-center">Contact:</p>
-        <div className="flex gap-2">
-          <span className="font-semibold">Feedback:</span>
-          <Link color="white" href="mailto:feedback@commitrocket.com" underline>feedback@commitrocket.com</Link>
+        <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>

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>
   );
 };