73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
import { CheckIcon, UserIcon } from 'lucide-react';
|
|
import { themeConfig } from './theme-provider';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { useLogout } from '@/hooks/use-logout';
|
|
import { useTheme } from '@/hooks/use-theme';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface Props {
|
|
className?: string;
|
|
}
|
|
|
|
export function ProfileToggle({ className }: Props) {
|
|
const { setTheme, userTheme, themes } = useTheme();
|
|
const logout = useLogout();
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<button
|
|
className={cn(className, 'center-center outline-0')}
|
|
type="button"
|
|
>
|
|
<UserIcon className="size-4" />
|
|
<span className="sr-only">Profile</span>
|
|
</button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="center" className="w-56">
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger className="flex w-full items-center justify-between">
|
|
Theme
|
|
<DropdownMenuShortcut>
|
|
<span className="mr-2">{themeConfig[userTheme].icon}</span>
|
|
{themeConfig[userTheme].label}
|
|
</DropdownMenuShortcut>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent className="p-0">
|
|
{themes.map((themeOption) => (
|
|
<DropdownMenuItem
|
|
className="capitalize"
|
|
key={themeOption.key}
|
|
onClick={() => setTheme(themeOption.key)}
|
|
>
|
|
<span className="mr-2">{themeOption.icon}</span>
|
|
{themeOption.label}
|
|
{userTheme === themeOption.key && (
|
|
<CheckIcon className="ml-2 h-4 w-4" />
|
|
)}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className="text-red-600"
|
|
onClick={() => logout.mutate()}
|
|
>
|
|
Logout
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|