refactor(web): org assets

web/src/app/layout.tsx

@@ -2,8 +2,8 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
-import { SiteHeader } from "@/components/site-header";
-import { SiteFooter } from "@/components/site-footer";
+import { Header } from "@/components/header";
+import { Footer } from "@/components/footer";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -37,10 +37,10 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <SiteHeader />
+          <Header />
           <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
             {children}
-            <SiteFooter />
+            <Footer />
           </div>
         </ThemeProvider>
       </body>

web/src/components/footer/api-link.tsx

@@ -0,0 +1,15 @@
+import { FileJson2 } from "lucide-react";
+
+export function ApiLink() {
+  return (
+    <a
+      className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+      href="https://api.filterlists.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <FileJson2 width={16} height={16} />
+      API
+    </a>
+  );
+}

web/src/components/footer/collinmbarrett-link/index.tsx

@@ -0,0 +1,24 @@
+import CollinMBarrettIconLight from "./collinmbarrett-icon-light.png";
+import CollinMBarrettIconDark from "./collinmbarrett-icon-dark.png";
+import { ImageThemed } from "@/components/image-themed";
+
+export function CollinMBarrettLink() {
+  return (
+    <a
+      className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+      href="https://collinmbarrett.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <ImageThemed
+        aria-hidden
+        srcLight={CollinMBarrettIconLight}
+        srcDark={CollinMBarrettIconDark}
+        alt="Collin M. Barrett logo"
+        width={16}
+        height={16}
+      />
+      by Collin M. Barrett
+    </a>
+  );
+}

web/src/components/footer/github-link/index.tsx

@@ -0,0 +1,24 @@
+import GitHubMarkLight from "./github-mark-light.svg";
+import GitHubMarkDark from "./github-mark-dark.svg";
+import { ImageThemed } from "@/components/image-themed";
+
+export function GitHubLink() {
+  return (
+    <a
+      className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+      href="https://github.com/collinbarrett/FilterLists"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <ImageThemed
+        aria-hidden
+        srcLight={GitHubMarkLight}
+        srcDark={GitHubMarkDark}
+        alt="GitHub Logomark"
+        width={16}
+        height={16}
+      />
+      GitHub
+    </a>
+  );
+}

web/src/components/footer/index.tsx

@@ -0,0 +1,13 @@
+import { CollinMBarrettLink } from "./collinmbarrett-link";
+import { GitHubLink } from "./github-link";
+import { ApiLink } from "./api-link";
+
+export function Footer() {
+  return (
+    <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
+      <CollinMBarrettLink />
+      <ApiLink />
+      <GitHubLink />
+    </footer>
+  );
+}

web/src/components/header.tsx

@@ -1,12 +1,12 @@
-import { ThemeModeToggle } from "./theme-mode-toggle";
+import { ThemeToggle } from "./theme-toggle";
 
-export function SiteHeader() {
+export function Header() {
   return (
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container flex h-14 items-center">
         <div className="flex flex-1 items-center justify-end space-x-4">
           <nav className="flex items-center space-x-1">
-            <ThemeModeToggle />
+            <ThemeToggle />
           </nav>
         </div>
       </div>

web/src/components/image-themed.tsx

@@ -10,7 +10,7 @@ type ThemedImageProps = Omit<ImageProps, "src" | "alt"> & {
   alt: string;
 };
 
-export function ThemeImage({
+export function ImageThemed({
   srcLight,
   srcDark,
   alt,

web/src/components/site-footer.tsx

@@ -1,54 +0,0 @@
-import { FileJson2 } from "lucide-react";
-import CollinMBarrettIconLight from "../assets/collinmbarrett-icon-light.png";
-import CollinMBarrettIconDark from "../assets/collinmbarrett-icon-dark.png";
-import GitHubMarkLight from "../assets/github-mark-light.svg";
-import GitHubMarkDark from "../assets/github-mark-dark.svg";
-import { ThemeImage } from "@/components/theme-image";
-
-export function SiteFooter() {
-  return (
-    <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-      <a
-        className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-        href="https://collinmbarrett.com/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <ThemeImage
-          aria-hidden
-          srcLight={CollinMBarrettIconLight}
-          srcDark={CollinMBarrettIconDark}
-          alt="Collin M. Barrett logo"
-          width={16}
-          height={16}
-        />
-        by Collin M. Barrett
-      </a>
-      <a
-        className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-        href="https://api.filterlists.com/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <FileJson2 width={16} height={16} />
-        API
-      </a>
-      <a
-        className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-        href="https://github.com/collinbarrett/FilterLists"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <ThemeImage
-          aria-hidden
-          srcLight={GitHubMarkLight}
-          srcDark={GitHubMarkDark}
-          alt="GitHub Logomark"
-          width={16}
-          height={16}
-        />
-        GitHub
-      </a>
-    </footer>
-  );
-}

web/src/components/theme-toggle.tsx

@@ -12,7 +12,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
-export function ThemeModeToggle() {
+export function ThemeToggle() {
   const { setTheme } = useTheme();
 
   return (