96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
import * as React from 'react';
|
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
import { Sun, Moon } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useTheme } from '@/contexts/ThemeContext';
|
|
|
|
/* ── Radix DropdownMenu thin wrappers ──────────────────────── */
|
|
|
|
const DropdownMenu = DropdownMenuPrimitive.Root;
|
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
|
|
|
|
const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 6, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.Portal>
|
|
<DropdownMenuPrimitive.Content
|
|
ref={ref}
|
|
sideOffset={sideOffset}
|
|
className={cn(
|
|
'z-50 min-w-[140px] overflow-hidden rounded-xl border border-border/70 bg-popover/95 p-1 text-popover-foreground shadow-xl backdrop-blur-sm',
|
|
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
|
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
|
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
|
'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
</DropdownMenuPrimitive.Portal>
|
|
));
|
|
DropdownMenuContent.displayName = 'DropdownMenuContent';
|
|
|
|
const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
|
|
<DropdownMenuPrimitive.Item
|
|
ref={ref}
|
|
className={cn(
|
|
'relative flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none',
|
|
'transition-colors focus:bg-accent focus:text-accent-foreground',
|
|
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
|
inset && 'pl-8',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
));
|
|
DropdownMenuItem.displayName = 'DropdownMenuItem';
|
|
|
|
/* ── Theme options config ───────────────────────────────────── */
|
|
|
|
const THEMES = [
|
|
{ value: 'light', label: 'Light', Icon: Sun },
|
|
{ value: 'dark', label: 'Dark', Icon: Moon },
|
|
];
|
|
|
|
/* ── ThemeToggle ────────────────────────────────────────────── */
|
|
|
|
export function ThemeToggle({ className }) {
|
|
const { theme, setTheme } = useTheme();
|
|
|
|
const current = THEMES.find((t) => t.value === theme) ?? THEMES[1];
|
|
const CurrentIcon = current.Icon;
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
className={cn(
|
|
'inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium',
|
|
'text-muted-foreground transition-all',
|
|
'hover:bg-accent hover:text-accent-foreground hover:shadow-sm',
|
|
'focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50',
|
|
'disabled:pointer-events-none disabled:opacity-50',
|
|
className
|
|
)}
|
|
aria-label={`Current theme: ${current.label}. Click to change.`}
|
|
>
|
|
<CurrentIcon className="h-4 w-4" />
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent align="end">
|
|
{THEMES.map(({ value, label, Icon }) => (
|
|
<DropdownMenuItem
|
|
key={value}
|
|
onSelect={() => setTheme(value)}
|
|
className={cn(
|
|
theme === value && 'text-primary font-medium'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
<span>{label}</span>
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|