Combobox

'use client';
 
import { Button } from '@/components/ui/button';
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import clsx from 'clsx';
import { Check, ChevronsUpDown } from 'lucide-react';
import { useState } from 'react';
import styles from './styles.module.scss';
 
const frameworks = [
    {
        value: 'next.js',
        label: 'Next.js',
    },
    {
        value: 'sveltekit',
        label: 'SvelteKit',
    },
    {
        value: 'nuxt.js',
        label: 'Nuxt.js',
    },
    {
        value: 'remix',
        label: 'Remix',
    },
    {
        value: 'astro',
        label: 'Astro',
    },
];
 
const ComboboxDemo = () => {
    const [open, setOpen] = useState<boolean>(false);
    const [value, setValue] = useState<string>('');
 
    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button variant='outline' role='combobox' aria-expanded={open} className={styles.trigger__btn}>
                    {value ? frameworks.find((framework) => framework.value === value)?.label : 'Select framework...'}
                    <ChevronsUpDown className={styles.trigger__btn__icon} />
                </Button>
            </PopoverTrigger>
            <PopoverContent className={styles.popover__content}>
                <Command>
                    <CommandInput placeholder='Search framework...' />
                    <CommandList>
                        <CommandEmpty>No framework found.</CommandEmpty>
                        <CommandGroup>
                            {frameworks.map((framework) => (
                                <CommandItem
                                    key={framework.value}
                                    value={framework.value}
                                    onSelect={(currentValue) => {
                                        setValue(currentValue === value ? '' : currentValue);
                                        setOpen(false);
                                    }}
                                >
                                    <Check
                                        className={clsx(
                                            styles.check__icon,
                                            value === framework.value
                                                ? styles.check__icon__visible
                                                : styles.check__icon__hidden
                                        )}
                                    />
                                    {framework.label}
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    );
};
 
export default ComboboxDemo;