Combobox

Here is Combobox component

'use client'

import { useId, useState } from 'react'

import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Button } from '@/components/ui/button'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList
} from '@/components/ui/command'
import { Label } from '@/components/ui/label'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

const users = [
  {
    name: 'Phillip George',
    email: 'phillip12@gmail.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/03/03a7fd80e48b0c266374a64bc634dbbb85582fd0dd77c1a27ecff4bb5406ff81.png',
    status: 'online'
  },
  {
    name: 'Jaylon Donin',
    email: 'jaylo-don@yahoo.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/ae/ae6a92c60e520aa6a3fe089f29762926b8851effbc1d39107437dae04aa88ae3.png',
    status: 'offline'
  },
  {
    name: 'Tiana Curtis',
    email: 'tiana_curtis@gmail.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/2f/2fcafa6e39ea7272850e186aa5d39db75cba438a6a1194b908bc5a1385dd41bf.png',
    status: 'away'
  },
  {
    name: 'Zaire Vetrovs',
    email: 'zaire.vetrovs@outlook.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/ad/adcffe6cb8b411be1665b47ea4b8aceb4d99f53c6ef02de8a5ab8d27b75a66ed.png',
    status: 'online'
  },
  {
    name: 'Kianna Philips',
    email: 'kiannaphilips@gmail.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/ec/ec81be4cc810190ce4d240fcc57295965c5cebaa8751558595ade91eb62c09a4.png',
    status: 'busy'
  },
  {
    name: 'John Doe',
    email: 'john2doe@icloud.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/79/79d0a07346424d3ca0fd8850624b410cf9c115262b36426ef875f6dfda226242.png',
    status: 'online'
  },
  {
    name: 'Rock Lee',
    email: 'rocklee@protonmail.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/33/33bb10257bead4eebdf427d8311126af025313e1d8dc6c260d0b81e73bfcc321.png',
    status: 'busy'
  },
  {
    name: 'Henry Potter',
    email: 'henry3potter@gmail.com',
    avatar: 'https://cdn.21st.dev/assets/mirror/e6/e61cbf0dead70ba11b46622c74ca564835b5ce0944c1182977a7652e47339e28.png',
    status: 'online'
  }
]

const ComboboxUserDemo = () => {
  const id = useId()
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState('')

  const selectedUser = users.find(user => user.name === value)

  return (
    <div className='w-full max-w-xs space-y-2'>
      <Label htmlFor={id}>User combobox</Label>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button id={id} variant='outline' role='combobox' aria-expanded={open} className='w-full justify-between'>
            {selectedUser ? (
              <span className='flex gap-2'>
                <Avatar className='size-6'>
                  <AvatarImage src={selectedUser.avatar} alt={selectedUser.name} />
                  <AvatarFallback>{selectedUser.name[0]}</AvatarFallback>
                </Avatar>
                <span className='font-medium'>{selectedUser.name}</span>
              </span>
            ) : (
              <span className='text-muted-foreground'>Select user</span>
            )}
            <ChevronsUpDownIcon size={16} className='text-muted-foreground/80 shrink-0' aria-hidden='true' />
          </Button>
        </PopoverTrigger>
        <PopoverContent className='w-[300px] p-0'>
          <Command>
            <CommandInput placeholder='Search user...' />
            <CommandList>
              <CommandEmpty>No users found.</CommandEmpty>
              <CommandGroup>
                {users.map(user => (
                  <CommandItem
                    key={user.name}
                    value={user.name}
                    onSelect={currentValue => {
                      setValue(currentValue === value ? '' : currentValue)
                      setOpen(false)
                    }}
                  >
                    <span className='flex items-center gap-2'>
                      <Avatar className='size-7'>
                        <AvatarImage src={user.avatar} alt={user.name} />
                        <AvatarFallback>{user.name[0]}</AvatarFallback>
                      </Avatar>
                      <span className='flex flex-col'>
                        <span className='font-medium'>{user.name}</span>
                        <span className='text-muted-foreground text-sm'>{user.email}</span>
                      </span>
                    </span>
                    {value === user.name && <CheckIcon size={16} className='ml-auto' />}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </div>
  )
}

export default ComboboxUserDemo