spb/fetcha

1"use client";2import * as React from "react";3import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";4import { Monitor, Moon, Sun } from "lucide-react";5import { Button } from "./button";6import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu";78export function ThemeProvider({ children }: { children: React.ReactNode }) {9  return (10    <NextThemesProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>11      {children}12    </NextThemesProvider>13  );14}1516export function ThemeToggle({ className }: { className?: string }) {17  const { setTheme, theme } = useTheme();18  return (19    <DropdownMenu>20      <DropdownMenuTrigger asChild>21        <Button variant="ghost" size="icon-sm" className={className} aria-label="Toggle theme">22          <Sun className="size-4 dark:hidden" />23          <Moon className="hidden size-4 dark:block" />24        </Button>25      </DropdownMenuTrigger>26      <DropdownMenuContent align="end">27        {(["light", "dark", "system"] as const).map((t) => (28          <DropdownMenuItem key={t} onClick={() => setTheme(t)} className={theme === t ? "font-medium text-fg" : undefined}>29            {t === "light" ? <Sun /> : t === "dark" ? <Moon /> : <Monitor />}30            <span className="capitalize">{t}</span>31          </DropdownMenuItem>32        ))}33      </DropdownMenuContent>34    </DropdownMenu>35  );36}37