Refactor root admin dashboard UI

components/theme-toggle.tsx

@@ -4,13 +4,22 @@ import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 
-import { Button } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
 type ThemeToggleProps = {
   ariaLabel?: string;
+  label?: string;
+  variant?: ButtonProps["variant"];
+  className?: string;
 };
 
-export function ThemeToggle({ ariaLabel = "Toggle theme" }: ThemeToggleProps) {
+export function ThemeToggle({
+  ariaLabel = "Toggle theme",
+  label,
+  variant = "outline",
+  className,
+}: ThemeToggleProps) {
   const { setTheme, theme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
 
@@ -20,8 +29,15 @@ export function ThemeToggle({ ariaLabel = "Toggle theme" }: ThemeToggleProps) {
 
   if (!mounted) {
     return (
-      <Button type="button" variant="outline" size="icon" aria-label={ariaLabel}>
+      <Button
+        type="button"
+        variant={variant}
+        size={label ? "sm" : "icon"}
+        aria-label={ariaLabel}
+        className={cn(label ? "justify-start" : undefined, className)}
+      >
         <Moon className="h-4 w-4" />
+        {label ? <span>{label}</span> : null}
       </Button>
     );
   }
@@ -30,8 +46,16 @@ export function ThemeToggle({ ariaLabel = "Toggle theme" }: ThemeToggleProps) {
   const isDark = activeTheme === "dark";
 
   return (
-    <Button type="button" variant="outline" size="icon" onClick={() => setTheme(isDark ? "light" : "dark")} aria-label={ariaLabel}>
+    <Button
+      type="button"
+      variant={variant}
+      size={label ? "sm" : "icon"}
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      aria-label={ariaLabel}
+      className={cn(label ? "justify-start" : undefined, className)}
+    >
       {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {label ? <span>{label}</span> : null}
     </Button>
   );
 }