Components
Loading preview...
Here is The Item components
@felipemenezes098
npx shadcn@latest add https://21st.dev/r/felipemenezes098/the-item-one 'use client'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/the-item-one'
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { LogOutIcon, SettingsIcon } from 'lucide-react'
export default function Item20() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Account</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-64 p-2">
<div className="flex items-center gap-3 px-2 py-1.5">
<Avatar className="size-9 rounded-sm">
<AvatarImage
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80"
alt="Sarah Chen"
className="object-cover"
/>
<AvatarFallback className="rounded-sm">SC</AvatarFallback>
</Avatar>
<div className="min-w-0">
<p className="truncate text-sm font-medium leading-none">
Sarah Chen
</p>
<p className="mt-1 truncate text-sm text-muted-foreground">
sarah@example.com
</p>
</div>
</div>
<DropdownMenuSeparator />
<DropdownMenuItem className="gap-2">
<SettingsIcon className="size-4 shrink-0" />
<span>Settings</span>
</DropdownMenuItem>
<DropdownMenuItem className="gap-2">
<LogOutIcon className="size-4 shrink-0" />
<span>Log out</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}