#591 - profile, users and projects

resources/js/components/ui/combobox.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+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';
+
+export function Combobox({
+  items,
+  value,
+  onValueChange,
+}: {
+  items: { value: string; label: string }[];
+  value: string;
+  onValueChange: (value: string) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" role="combobox" aria-expanded={open} className="w-[400px] justify-between">
+          {value ? items.find((item) => item.value === value)?.label : 'Select item...'}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[400px] p-0">
+        <Command>
+          <CommandInput placeholder="Search item..." />
+          <CommandList>
+            <CommandEmpty>No item found.</CommandEmpty>
+            <CommandGroup>
+              {open &&
+                items.map((item) => (
+                  <CommandItem
+                    key={item.value}
+                    value={item.value}
+                    onSelect={(currentValue) => {
+                      value = currentValue;
+                      onValueChange(value);
+                      setOpen(false);
+                    }}
+                  >
+                    {item.label}
+                    <Check className={cn('ml-auto', value === item.value ? 'opacity-100' : 'opacity-0')} />
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}