'use client';
import { useState } from 'react';
import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';
import { cn } from '@kosori/ui';
import { Button } from '@kosori/ui/button';
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '@kosori/ui/command';
import { Popover, PopoverContent, PopoverTrigger } from '@kosori/ui/popover';
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',
},
];
export const ComboboxDemo = () => {
const [open, setOpen] = useState(false);
const [value, setValue] = useState('');
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
aria-expanded={open}
className='w-[200px] justify-between'
role='combobox'
variant='outline'
>
{value
? frameworks.find((framework) => framework.value === value)?.label
: 'Select framework...'}
<CaretSortIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
</Button>
</PopoverTrigger>
<PopoverContent className='w-[200px] p-0'>
<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);
}}
>
<CheckIcon
className={cn(
'mr-2 h-4 w-4',
value === framework.value ? 'opacity-100' : 'opacity-0',
)}
/>
{framework.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
};