Add global things from old app

src/components/global/Footer.tsx

@@ -0,0 +1,5 @@
+export default function Footer() {
+  return (
+    <div>Footer</div>
+  );
+}

src/components/global/Header.tsx

@@ -0,0 +1,18 @@
+// import { auth } from "@/auth";
+// import { SignInOutButton } from "../auth/SignInOutButton";
+import ModeToggle from "./ModeToggle";
+import TopNav from "./TopNav";
+
+export default async function Header() {
+  // const session = await auth()
+
+  return (
+    <div className="flex items-center justify-between">
+      <TopNav />
+      <div className="flex items-center justify-between gap-4">
+        {/* <SignInOutButton session={session} /> */}
+        <ModeToggle />
+      </div>
+    </div>
+  );
+}

src/components/global/ModeToggle.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { cn } from "@/lib/utils"
+import { useEffect, useState } from "react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+
+const modes = ["light", "dark"] as const
+const accents = ["zinc", "red", "rose", "orange", "green", "blue", "yellow", "violet"] as const
+
+const modeIcons = {
+  light: <Sun className="h-4 w-4" />,
+  dark: <Moon className="h-4 w-4" />,
+}
+
+export default function ModeToggle() {
+  const { setTheme, theme } = useTheme()
+  const [mode, setMode] = useState("dark")
+  const [accent, setAccent] = useState("violet")
+
+  useEffect(() => {
+    const parts = theme?.split("-")
+    if (parts?.length === 2) {
+      setMode(parts[0])
+      setAccent(parts[1])
+    }
+  }, [theme])
+
+  function updateTheme(newMode: string, newAccent: string) {
+    const fullTheme = `${newMode}-${newAccent}`
+    setTheme(fullTheme)
+  }
+
+  const accentColorMap: Record<string, string> = {
+    zinc: "text-zinc-600",
+    red: "text-red-600",
+    rose: "text-rose-600",
+    orange: "text-orange-600",
+    green: "text-green-600",
+    blue: "text-blue-600",
+    yellow: "text-yellow-600",
+    violet: "text-violet-600",
+  }
+
+  return (
+    <div className="flex gap-4 items-center">
+      <Select
+        value={mode}
+        onValueChange={(value) => {
+          setMode(value)
+          updateTheme(value, accent)
+        }}
+      >
+        <SelectTrigger className="w-[70px]">
+          <SelectValue
+            placeholder="Mode"
+            className="flex items-center gap-2"
+          />
+        </SelectTrigger>
+        <SelectContent>
+          {modes.map((m) => (
+            <SelectItem key={m} value={m}>
+              <span className="flex items-center gap-2">
+                {modeIcons[m]}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Select
+        value={accent}
+        onValueChange={(value) => {
+          setAccent(value)
+          updateTheme(mode, value)
+        }}
+      >
+        <SelectTrigger className="w-[120px]">
+          <SelectValue placeholder="Accent" />
+        </SelectTrigger>
+        <SelectContent>
+          {accents.map((a) => (
+            <SelectItem key={a} value={a} className={cn(accentColorMap[a])}>
+              {a.charAt(0).toUpperCase() + a.slice(1)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}

src/components/global/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import * as React from "react"
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

src/components/global/Toaster.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

src/components/global/TopNav.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import Link from "next/link";
+
+export default function TopNav() {
+  return (
+    <NavigationMenu viewport={false}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/">Home</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Portfolio</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="grid gap-2 p-4 w-48">
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="/portfolio" className="block px-2 py-1 rounded hover:bg-muted">
+                    All Portfolio Images
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="/portfolio/arttypes" className="block px-2 py-1 rounded hover:bg-muted">
+                    Art Types
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="/portfolio/categories" className="block px-2 py-1 rounded hover:bg-muted">
+                    Categories
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+              <li>
+                <NavigationMenuLink asChild>
+                  <Link href="/portfolio/tags" className="block px-2 py-1 rounded hover:bg-muted">
+                    Tags
+                  </Link>
+                </NavigationMenuLink>
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/items/commissions/types">CommissionTypes</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+            <Link href="/items/commissions/tos">ToS</Link>
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}