From ee4b2ee0de474400cdae07e5a27307579973d630 Mon Sep 17 00:00:00 2001
From: Elias Almqvist <elalmqvist@gmail.com>
Date: Fri, 29 Mar 2024 16:35:11 +0100
Subject: [PATCH] More light/dark mode things

---
 src/app/layout.tsx               |  2 +-
 src/components/layout/header.tsx |  2 ++
 src/components/layout/nav.tsx    |  6 +-----
 src/components/navlinks.tsx      |  5 ++++-
 src/components/themebutton.tsx   | 32 ++++++++++++++++++++++++++++++++
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 src/components/themebutton.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3f859fe..5d4a970 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
       <body
         className={cn(
           "min-h-screen bg-background text-foreground antialiased",
-          fonts.sans.className
+          fonts.sans.className,
         )}
       >
         <ThemeProvider
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index 4899d1c..277fd6c 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { cn } from "@/lib/utils";
 import NavLinks from "../navlinks";
 import { Button } from "../ui/button";
+import ThemeButton from "../themebutton";
 
 const Header = () => (
   <header className="w-full flex flex-col justify-center items-center">
@@ -25,6 +26,7 @@ const Header = () => (
         </Link>
       </div>
       <div className="flex flex-row items-center space-x-2">
+        <ThemeButton className="w-4 h-4" />
         <Nav />
         <ul className="flex flex-row space-x-2 w-fit h-full items-center">
           {NavLinks.map((link) => (
diff --git a/src/components/layout/nav.tsx b/src/components/layout/nav.tsx
index bdc922b..78121d7 100644
--- a/src/components/layout/nav.tsx
+++ b/src/components/layout/nav.tsx
@@ -14,11 +14,7 @@ import {
   CommandSeparator,
   CommandShortcut,
 } from "@/components/ui/command";
-import {
-  GalleryHorizontalEnd,
-  Home,
-  SunMoon,
-} from "lucide-react";
+import { GalleryHorizontalEnd, Home, SunMoon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useActionCommand } from "@/hooks/useActionCommand";
 import { useTheme } from "next-themes";
diff --git a/src/components/navlinks.tsx b/src/components/navlinks.tsx
index 9a04b4b..5e18dee 100644
--- a/src/components/navlinks.tsx
+++ b/src/components/navlinks.tsx
@@ -1,4 +1,7 @@
-import { GitHubLogoIcon as GitHub, LinkedInLogoIcon } from "@radix-ui/react-icons";
+import {
+  GitHubLogoIcon as GitHub,
+  LinkedInLogoIcon,
+} from "@radix-ui/react-icons";
 import { FaXTwitter } from "react-icons/fa6";
 
 type NavLink = {
diff --git a/src/components/themebutton.tsx b/src/components/themebutton.tsx
new file mode 100644
index 0000000..e8e6689
--- /dev/null
+++ b/src/components/themebutton.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import { Eclipse, SunMoon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type ThemeButtonProps = {
+  className?: string;
+};
+
+const iconClassname = "w-5 h-5";
+
+const ThemeButton: React.FC<ThemeButtonProps> = ({ className }) => {
+  const { theme, setTheme } = useTheme();
+  return (
+    <Button
+      className="w-fit h-fit p-3"
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+    >
+      {theme === "light" ? (
+        <SunMoon className={cn(iconClassname, className)} />
+      ) : (
+        <Eclipse className={cn(iconClassname, className)} />
+      )}
+    </Button>
+  );
+};
+
+export default ThemeButton;
