elal
/
wych.dev
mirror of https://github.com/almqv/wych.dev
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More light/dark mode things

Browse Source
main
Elias Almqvist 8 months ago
parent bcd19d2c35
commit ee4b2ee0de
No known key found for this signature in database
GPG Key ID: E31A99CE3E75A158
5 changed files with 40 additions and 7 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/layout.tsx
  2. 2
      src/components/layout/header.tsx
  3. 6
      src/components/layout/nav.tsx
  4. 5
      src/components/navlinks.tsx
  5. 32
      src/components/themebutton.tsx

2
src/app/layout.tsx
Unescape View File

@ -23,7 +23,7 @@ export default function RootLayout({
<body <body
className={cn( className={cn(
"min-h-screen bg-background text-foreground antialiased", "min-h-screen bg-background text-foreground antialiased",
fonts.sans.className fonts.sans.className,
)} )}
> >
<ThemeProvider <ThemeProvider

2
src/components/layout/header.tsx
Unescape View File

@ -4,6 +4,7 @@ import Link from "next/link";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import NavLinks from "../navlinks"; import NavLinks from "../navlinks";
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import ThemeButton from "../themebutton";
const Header = () => ( const Header = () => (
<header className="w-full flex flex-col justify-center items-center"> <header className="w-full flex flex-col justify-center items-center">
@ -25,6 +26,7 @@ const Header = () => (
</Link> </Link>
</div> </div>
<div className="flex flex-row items-center space-x-2"> <div className="flex flex-row items-center space-x-2">
<ThemeButton className="w-4 h-4" />
<Nav /> <Nav />
<ul className="flex flex-row space-x-2 w-fit h-full items-center"> <ul className="flex flex-row space-x-2 w-fit h-full items-center">
{NavLinks.map((link) => ( {NavLinks.map((link) => (

6
src/components/layout/nav.tsx
Unescape View File

@ -14,11 +14,7 @@ import {
CommandSeparator, CommandSeparator,
CommandShortcut, CommandShortcut,
} from "@/components/ui/command"; } from "@/components/ui/command";
import { import { GalleryHorizontalEnd, Home, SunMoon } from "lucide-react";
GalleryHorizontalEnd,
Home,
SunMoon,
} from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useActionCommand } from "@/hooks/useActionCommand"; import { useActionCommand } from "@/hooks/useActionCommand";
import { useTheme } from "next-themes"; import { useTheme } from "next-themes";

5
src/components/navlinks.tsx
Unescape View File

@ -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"; import { FaXTwitter } from "react-icons/fa6";
type NavLink = { type NavLink = {

32
src/components/themebutton.tsx
Unescape View File

@ -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;
Write Preview
Loading…
Cancel
Save