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>
     )
   }