116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
CreditCard,
|
|
Keyboard,
|
|
LogOut,
|
|
Mail,
|
|
MessageSquare,
|
|
Plus,
|
|
PlusCircle,
|
|
Settings,
|
|
User,
|
|
UserPlus,
|
|
Users,
|
|
} from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
import { Button } from '@workspace/ui/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuPortal,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
} from '@/registry/radix/dropdown-menu';
|
|
|
|
export const RadixDropdownMenuDemo = () => {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" asChild>
|
|
<motion.button
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
Open
|
|
</motion.button>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56">
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<User />
|
|
<span>Profile</span>
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<CreditCard />
|
|
<span>Billing</span>
|
|
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Settings />
|
|
<span>Settings</span>
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<Keyboard />
|
|
<span>Keyboard shortcuts</span>
|
|
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<Users />
|
|
<span>Team</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<UserPlus />
|
|
<span>Invite users</span>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>
|
|
<Mail />
|
|
<span>Email</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<MessageSquare />
|
|
<span>Message</span>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<PlusCircle />
|
|
<span>More...</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuItem disabled>
|
|
<Plus />
|
|
<span>New Team</span>
|
|
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<LogOut />
|
|
<span>Log out</span>
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
};
|