More light/dark mode things

8 months ago · ee4b2ee0de
parent bcd19d2c35
commit ee4b2ee0de
5 changed files with 40 additions and 7 deletions
--- 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
--- 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) => (
--- 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";
--- 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 = {
--- a/src/components/themebutton.tsx
+++ 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;