feat: add figma make components

2026-05-24 07:15:44 +00:00 · 2026-01-07 10:59:12 +07:00
parent 88c6c863e7
commit 770f363c60
56 changed files with 11887 additions and 0 deletions
@@ -0,0 +1,143 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { cn } from '@/lib/helper';
+import { Button } from '@/figma-make/components/base/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/figma-make/components/base/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/figma-make/components/base/popover';
+import { Badge } from '@/figma-make/components/base/badge';
+
+export interface Option {
+  value: string;
+  label: string;
+}
+
+interface MultiSelectProps {
+  options: Option[];
+  selected: string[];
+  onChange: (selected: string[]) => void;
+  onSearchChange?: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function MultiSelect({
+  options,
+  selected,
+  onChange,
+  onSearchChange,
+  placeholder = 'Select items...',
+  className,
+  disabled,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleUnselect = (item: string) => {
+    onChange(selected.filter((i) => i !== item));
+  };
+
+  const handleSelect = (item: string) => {
+    if (selected.includes(item)) {
+      handleUnselect(item);
+    } else {
+      onChange([...selected, item]);
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          role='combobox'
+          aria-expanded={open}
+          className={cn(
+            'w-full justify-between items-center h-auto min-h-9 py-2 px-3',
+            className
+          )}
+          disabled={disabled}
+        >
+          <div className='flex flex-wrap gap-1'>
+            {selected.length > 0 ? (
+              selected.map((item) => {
+                const option = options.find((o) => o.value === item);
+                return (
+                  <Badge variant='outline' key={item} className='mr-1 mb-1'>
+                    {option?.label || item}
+                    <div
+                      className='ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer'
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          handleUnselect(item);
+                        }
+                      }}
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleUnselect(item);
+                      }}
+                    >
+                      <X className='h-3 w-3 text-muted-foreground hover:text-foreground' />
+                    </div>
+                  </Badge>
+                );
+              })
+            ) : (
+              <span className='text-muted-foreground font-normal'>
+                {placeholder}
+              </span>
+            )}
+          </div>
+          <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-full p-0' align='start'>
+        <Command>
+          <CommandInput
+            placeholder={`Search ${placeholder.toLowerCase()}...`}
+            onValueChange={onSearchChange}
+          />
+          <CommandEmpty>No item found.</CommandEmpty>
+          <CommandList>
+            <CommandGroup className='max-h-64 overflow-auto'>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  onSelect={() => handleSelect(option.value)}
+                  className='cursor-pointer'
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      selected.includes(option.value)
+                        ? 'opacity-100'
+                        : 'opacity-0'
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}