Updates

layouts/main/(data)/links.tsx

@@ -1,37 +1,32 @@
+import { TWUI_LINK_LIST_LINK_OBJECT } from "@/components/lib/elements/LinkList";
 import { GitBranch, Github, Linkedin, Mail, Users } from "lucide-react";
 import { ReactNode } from "react";
 
-export type HeaderLinkType = {
-    name: string;
-    href: string;
-    current?: boolean;
-};
-
-export const HeaderLinks: HeaderLinkType[] = [
+export const HeaderLinks: TWUI_LINK_LIST_LINK_OBJECT[] = [
     {
-        name: "Home",
-        href: "/",
-        current: true,
+        title: "Home",
+        url: "/",
+        strict: true,
     },
     {
-        name: "About",
-        href: "/about",
+        title: "About",
+        url: "/about",
     },
     {
-        name: "Skills",
-        href: "/skills",
+        title: "Skills",
+        url: "/skills",
     },
     {
-        name: "Work",
-        href: "/work",
+        title: "Work",
+        url: "/work",
     },
     {
-        name: "Blog",
-        href: "/blog",
+        title: "Blog",
+        url: "/blog",
     },
     {
-        name: "Contact",
-        href: "/contact",
+        title: "Contact",
+        url: "/contact",
     },
 ];
 

layouts/main/(partials)/HeaderLink.tsx

@@ -1,13 +1,13 @@
-import { HeaderLinkType } from "../(data)/links";
+import { TWUI_LINK_LIST_LINK_OBJECT } from "@/components/lib/elements/LinkList";
 
 type Props = {
-    link: HeaderLinkType;
+    link: TWUI_LINK_LIST_LINK_OBJECT;
 };
 
 export default function HeaderLink({ link }: Props) {
     return (
-        <a href={link.href} className="text-white hover:text-gray-300">
-            {link.name}
+        <a href={link.url} className="text-white hover:text-gray-300">
+            {link.title}
         </a>
     );
 }

layouts/main/(sections)/MobileMenu.tsx

@@ -2,13 +2,13 @@ import Logo from "@/components/general/Logo";
 import Stack from "@/components/lib/layout/Stack";
 import { twMerge } from "tailwind-merge";
 import { HeaderLinks, SocialLinks } from "../(data)/links";
-import HeaderLink from "../(partials)/HeaderLink";
 import React from "react";
 import Divider from "@/components/lib/layout/Divider";
 import Button from "@/components/lib/layout/Button";
 import { X } from "lucide-react";
 import SocialLink from "../(partials)/SocialLink";
 import Row from "@/components/lib/layout/Row";
+import LinkList from "@/components/lib/elements/LinkList";
 
 type Props = {
     menuOpen: boolean;
@@ -19,12 +19,13 @@ export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
     return (
         <div
             className={twMerge(
-                "fixed top-0 bg-[var(--bg-color)] w-full h-full overflow-y-auto",
-                "z-[100] p-10",
+                "fixed top-0 w-full h-full overflow-y-auto",
+                "z-[100] p-10 bg-background dark:bg-background-dark",
                 menuOpen ? "right-0" : "right-[100vw]"
             )}
         >
             <Button
+                title="Close Mobile Menu"
                 variant="ghost"
                 className="absolute top-10 right-10"
                 onClick={() => setMenuOpen(false)}
@@ -33,19 +34,15 @@ export default function MobileMenu({ menuOpen, setMenuOpen }: Props) {
             </Button>
             <Stack className="w-full h-full">
                 <Logo size={40} />
-                <Divider />
+                <Divider dashed className="border-[2px] mt-4 mb-2" />
                 <Stack className="w-full items-stretch">
-                    {HeaderLinks.map((link, index) => {
-                        return (
-                            <React.Fragment key={index}>
-                                <HeaderLink key={index} link={link} />
-                                {index < HeaderLinks.length - 1 && <Divider />}
-                            </React.Fragment>
-                        );
-                    })}
+                    <LinkList
+                        links={HeaderLinks}
+                        className="flex-col items-stretch"
+                    />
                 </Stack>
-                <Divider />
-                <Row className="items-center w-full py-6 mt-auto gap-10 mt-auto">
+                <Divider dashed className="border-[2px] my-4" />
+                <Row className="items-center w-full py-6 gap-10 mt-auto">
                     {SocialLinks.map((link, index) => {
                         return <SocialLink key={index} link={link} />;
                     })}

layouts/main/Header.tsx

@@ -1,11 +1,11 @@
 import { twMerge } from "tailwind-merge";
 import { HeaderLinks } from "./(data)/links";
-import HeaderLink from "./(partials)/HeaderLink";
 import Row from "@/components/lib/layout/Row";
 import Logo from "@/components/general/Logo";
 import { Menu } from "lucide-react";
 import Button from "@/components/lib/layout/Button";
 import React from "react";
+import LinkList from "@/components/lib/elements/LinkList";
 
 type Props = {
     menuOpen: boolean;
@@ -22,13 +22,15 @@ export default function Header({ menuOpen, setMenuOpen }: Props) {
             )}
         >
             <Row className="gap-6 ml-auto hidden md:flex">
-                {HeaderLinks.map((link, index) => {
-                    return <HeaderLink key={index} link={link} />;
-                })}
+                <LinkList links={HeaderLinks} />
             </Row>
             <Row className="flex md:hidden w-full justify-between">
                 <Logo size={25} />
-                <Button variant="ghost" onClick={() => setMenuOpen(!menuOpen)}>
+                <Button
+                    title="Mobile Menu"
+                    variant="ghost"
+                    onClick={() => setMenuOpen(!menuOpen)}
+                >
                     <Menu />
                 </Button>
             </Row>

layouts/main/index.tsx

@@ -1,12 +1,8 @@
-import Main from "@/components/lib/layout/Main";
 import React, { PropsWithChildren } from "react";
 import Aside from "./Aside";
 import Header from "./Header";
 import Footer from "./Footer";
 import { twMerge } from "tailwind-merge";
-import Stack from "@/components/lib/layout/Stack";
-import { HeaderLinks } from "./(data)/links";
-import HeaderLink from "./(partials)/HeaderLink";
 import MobileMenu from "./(sections)/MobileMenu";
 
 type Props = PropsWithChildren & {};