{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-485",
  "type": "registry:component",
  "title": "Comp 485",
  "description": "Comp 485",
  "files": [
    {
      "path": "registry/ui-basic/comp-485.tsx",
      "content": "\"use client\";\r\n\r\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\r\n\r\nimport {\r\n\tAlertDialog,\r\n\tAlertDialogAction,\r\n\tAlertDialogCancel,\r\n\tAlertDialogContent,\r\n\tAlertDialogDescription,\r\n\tAlertDialogFooter,\r\n\tAlertDialogHeader,\r\n\tAlertDialogTitle,\r\n\tAlertDialogTrigger,\r\n} from \"@/components/ui/alert-dialog\";\r\nimport { Badge } from \"@/components/ui/badge\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Checkbox } from \"@/components/ui/checkbox\";\r\nimport {\r\n\tDropdownMenu,\r\n\tDropdownMenuCheckboxItem,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuGroup,\r\n\tDropdownMenuItem,\r\n\tDropdownMenuLabel,\r\n\tDropdownMenuPortal,\r\n\tDropdownMenuSeparator,\r\n\tDropdownMenuShortcut,\r\n\tDropdownMenuSub,\r\n\tDropdownMenuSubContent,\r\n\tDropdownMenuSubTrigger,\r\n\tDropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport {\r\n\tPagination,\r\n\tPaginationContent,\r\n\tPaginationItem,\r\n} from \"@/components/ui/pagination\";\r\nimport {\r\n\tPopover,\r\n\tPopoverContent,\r\n\tPopoverTrigger,\r\n} from \"@/components/ui/popover\";\r\nimport {\r\n\tSelect,\r\n\tSelectContent,\r\n\tSelectItem,\r\n\tSelectTrigger,\r\n\tSelectValue,\r\n} from \"@/components/ui/select\";\r\nimport {\r\n\tTable,\r\n\tTableBody,\r\n\tTableCell,\r\n\tTableHead,\r\n\tTableHeader,\r\n\tTableRow,\r\n} from \"@/components/ui/table\";\r\nimport {\r\n\tColumnDef,\r\n\tColumnFiltersState,\r\n\tFilterFn,\r\n\tflexRender,\r\n\tgetCoreRowModel,\r\n\tgetFacetedUniqueValues,\r\n\tgetFilteredRowModel,\r\n\tgetPaginationRowModel,\r\n\tgetSortedRowModel,\r\n\tPaginationState,\r\n\tRow,\r\n\tSortingState,\r\n\tuseReactTable,\r\n\tVisibilityState,\r\n} from \"@tanstack/react-table\";\r\nimport {\r\n\tChevronDownIcon,\r\n\tChevronFirstIcon,\r\n\tChevronLastIcon,\r\n\tChevronLeftIcon,\r\n\tChevronRightIcon,\r\n\tChevronUpIcon,\r\n\tCircleAlertIcon,\r\n\tCircleXIcon,\r\n\tColumns3Icon,\r\n\tEllipsisIcon,\r\n\tFilterIcon,\r\n\tListFilterIcon,\r\n\tPlusIcon,\r\n\tTrashIcon,\r\n} from \"lucide-react\";\r\n\r\nimport { cn } from \"../utilities/cn\";\r\n\r\ntype Item = {\r\n\tid: string;\r\n\tname: string;\r\n\temail: string;\r\n\tlocation: string;\r\n\tflag: string;\r\n\tstatus: \"Active\" | \"Inactive\" | \"Pending\";\r\n\tbalance: number;\r\n};\r\n\r\n// Custom filter function for multi-column searching\r\nconst multiColumnFilterFn: FilterFn<Item> = (row, columnId, filterValue) => {\r\n\tconst searchableRowContent =\r\n\t\t`${row.original.name} ${row.original.email}`.toLowerCase();\r\n\tconst searchTerm = (filterValue ?? \"\").toLowerCase();\r\n\treturn searchableRowContent.includes(searchTerm);\r\n};\r\n\r\nconst statusFilterFn: FilterFn<Item> = (\r\n\trow,\r\n\tcolumnId,\r\n\tfilterValue: string[]\r\n) => {\r\n\tif (!filterValue?.length) return true;\r\n\tconst status = row.getValue(columnId) as string;\r\n\treturn filterValue.includes(status);\r\n};\r\n\r\nconst columns: ColumnDef<Item>[] = [\r\n\t{\r\n\t\tid: \"select\",\r\n\t\theader: ({ table }) => (\r\n\t\t\t<Checkbox\r\n\t\t\t\tchecked={\r\n\t\t\t\t\ttable.getIsAllPageRowsSelected() ||\r\n\t\t\t\t\t(table.getIsSomePageRowsSelected() && \"indeterminate\")\r\n\t\t\t\t}\r\n\t\t\t\tonCheckedChange={(value) =>\r\n\t\t\t\t\ttable.toggleAllPageRowsSelected(!!value)\r\n\t\t\t\t}\r\n\t\t\t\taria-label=\"Select all\"\r\n\t\t\t/>\r\n\t\t),\r\n\t\tcell: ({ row }) => (\r\n\t\t\t<Checkbox\r\n\t\t\t\tchecked={row.getIsSelected()}\r\n\t\t\t\tonCheckedChange={(value) => row.toggleSelected(!!value)}\r\n\t\t\t\taria-label=\"Select row\"\r\n\t\t\t/>\r\n\t\t),\r\n\t\tsize: 28,\r\n\t\tenableSorting: false,\r\n\t\tenableHiding: false,\r\n\t},\r\n\t{\r\n\t\theader: \"Name\",\r\n\t\taccessorKey: \"name\",\r\n\t\tcell: ({ row }) => (\r\n\t\t\t<div className=\"font-medium\">{row.getValue(\"name\")}</div>\r\n\t\t),\r\n\t\tsize: 180,\r\n\t\tfilterFn: multiColumnFilterFn,\r\n\t\tenableHiding: false,\r\n\t},\r\n\t{\r\n\t\theader: \"Email\",\r\n\t\taccessorKey: \"email\",\r\n\t\tsize: 220,\r\n\t},\r\n\t{\r\n\t\theader: \"Location\",\r\n\t\taccessorKey: \"location\",\r\n\t\tcell: ({ row }) => (\r\n\t\t\t<div>\r\n\t\t\t\t<span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\r\n\t\t\t\t{row.getValue(\"location\")}\r\n\t\t\t</div>\r\n\t\t),\r\n\t\tsize: 180,\r\n\t},\r\n\t{\r\n\t\theader: \"Status\",\r\n\t\taccessorKey: \"status\",\r\n\t\tcell: ({ row }) => (\r\n\t\t\t<Badge\r\n\t\t\t\tclassName={cn(\r\n\t\t\t\t\trow.getValue(\"status\") === \"Inactive\" &&\r\n\t\t\t\t\t\t\"bg-muted-foreground/60 text-primary-foreground\"\r\n\t\t\t\t)}\r\n\t\t\t>\r\n\t\t\t\t{row.getValue(\"status\")}\r\n\t\t\t</Badge>\r\n\t\t),\r\n\t\tsize: 100,\r\n\t\tfilterFn: statusFilterFn,\r\n\t},\r\n\t{\r\n\t\theader: \"Performance\",\r\n\t\taccessorKey: \"performance\",\r\n\t},\r\n\t{\r\n\t\theader: \"Balance\",\r\n\t\taccessorKey: \"balance\",\r\n\t\tcell: ({ row }) => {\r\n\t\t\tconst amount = parseFloat(row.getValue(\"balance\"));\r\n\t\t\tconst formatted = new Intl.NumberFormat(\"en-US\", {\r\n\t\t\t\tstyle: \"currency\",\r\n\t\t\t\tcurrency: \"USD\",\r\n\t\t\t}).format(amount);\r\n\t\t\treturn formatted;\r\n\t\t},\r\n\t\tsize: 120,\r\n\t},\r\n\t{\r\n\t\tid: \"actions\",\r\n\t\theader: () => <span className=\"sr-only\">Actions</span>,\r\n\t\tcell: ({ row }) => <RowActions row={row} />,\r\n\t\tsize: 60,\r\n\t\tenableHiding: false,\r\n\t},\r\n];\r\n\r\nexport default function Component() {\r\n\tconst id = useId();\r\n\tconst [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\r\n\tconst [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\r\n\t\t{}\r\n\t);\r\n\tconst [pagination, setPagination] = useState<PaginationState>({\r\n\t\tpageIndex: 0,\r\n\t\tpageSize: 10,\r\n\t});\r\n\tconst inputRef = useRef<HTMLInputElement>(null);\r\n\r\n\tconst [sorting, setSorting] = useState<SortingState>([\r\n\t\t{\r\n\t\t\tid: \"name\",\r\n\t\t\tdesc: false,\r\n\t\t},\r\n\t]);\r\n\r\n\tconst [data, setData] = useState<Item[]>([]);\r\n\tuseEffect(() => {\r\n\t\tasync function fetchPosts() {\r\n\t\t\tconst res = await fetch(\r\n\t\t\t\t\"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\r\n\t\t\t);\r\n\t\t\tconst data = await res.json();\r\n\t\t\tsetData(data);\r\n\t\t}\r\n\t\tfetchPosts();\r\n\t}, []);\r\n\r\n\tconst handleDeleteRows = () => {\r\n\t\tconst selectedRows = table.getSelectedRowModel().rows;\r\n\t\tconst updatedData = data.filter(\r\n\t\t\t(item) => !selectedRows.some((row) => row.original.id === item.id)\r\n\t\t);\r\n\t\tsetData(updatedData);\r\n\t\ttable.resetRowSelection();\r\n\t};\r\n\r\n\tconst table = useReactTable({\r\n\t\tdata,\r\n\t\tcolumns,\r\n\t\tgetCoreRowModel: getCoreRowModel(),\r\n\t\tgetSortedRowModel: getSortedRowModel(),\r\n\t\tonSortingChange: setSorting,\r\n\t\tenableSortingRemoval: false,\r\n\t\tgetPaginationRowModel: getPaginationRowModel(),\r\n\t\tonPaginationChange: setPagination,\r\n\t\tonColumnFiltersChange: setColumnFilters,\r\n\t\tonColumnVisibilityChange: setColumnVisibility,\r\n\t\tgetFilteredRowModel: getFilteredRowModel(),\r\n\t\tgetFacetedUniqueValues: getFacetedUniqueValues(),\r\n\t\tstate: {\r\n\t\t\tsorting,\r\n\t\t\tpagination,\r\n\t\t\tcolumnFilters,\r\n\t\t\tcolumnVisibility,\r\n\t\t},\r\n\t});\r\n\r\n\t// Get unique status values\r\n\tconst uniqueStatusValues = useMemo(() => {\r\n\t\tconst statusColumn = table.getColumn(\"status\");\r\n\r\n\t\tif (!statusColumn) return [];\r\n\r\n\t\tconst values = Array.from(statusColumn.getFacetedUniqueValues().keys());\r\n\r\n\t\treturn values.sort();\r\n\t}, [table.getColumn(\"status\")?.getFacetedUniqueValues()]);\r\n\r\n\t// Get counts for each status\r\n\tconst statusCounts = useMemo(() => {\r\n\t\tconst statusColumn = table.getColumn(\"status\");\r\n\t\tif (!statusColumn) return new Map();\r\n\t\treturn statusColumn.getFacetedUniqueValues();\r\n\t}, [table.getColumn(\"status\")?.getFacetedUniqueValues()]);\r\n\r\n\tconst selectedStatuses = useMemo(() => {\r\n\t\tconst filterValue = table\r\n\t\t\t.getColumn(\"status\")\r\n\t\t\t?.getFilterValue() as string[];\r\n\t\treturn filterValue ?? [];\r\n\t}, [table.getColumn(\"status\")?.getFilterValue()]);\r\n\r\n\tconst handleStatusChange = (checked: boolean, value: string) => {\r\n\t\tconst filterValue = table\r\n\t\t\t.getColumn(\"status\")\r\n\t\t\t?.getFilterValue() as string[];\r\n\t\tconst newFilterValue = filterValue ? [...filterValue] : [];\r\n\r\n\t\tif (checked) {\r\n\t\t\tnewFilterValue.push(value);\r\n\t\t} else {\r\n\t\t\tconst index = newFilterValue.indexOf(value);\r\n\t\t\tif (index > -1) {\r\n\t\t\t\tnewFilterValue.splice(index, 1);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\ttable\r\n\t\t\t.getColumn(\"status\")\r\n\t\t\t?.setFilterValue(newFilterValue.length ? newFilterValue : undefined);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className=\"space-y-4\">\r\n\t\t\t{/* Filters */}\r\n\t\t\t<div className=\"flex flex-wrap items-center justify-between gap-3\">\r\n\t\t\t\t<div className=\"flex items-center gap-3\">\r\n\t\t\t\t\t{/* Filter by name or email */}\r\n\t\t\t\t\t<div className=\"relative\">\r\n\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\tid={`${id}-input`}\r\n\t\t\t\t\t\t\tref={inputRef}\r\n\t\t\t\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\t\t\t\"peer min-w-60 ps-9\",\r\n\t\t\t\t\t\t\t\tBoolean(table.getColumn(\"name\")?.getFilterValue()) &&\r\n\t\t\t\t\t\t\t\t\t\"pe-9\"\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\tvalue={\r\n\t\t\t\t\t\t\t\t(table.getColumn(\"name\")?.getFilterValue() ??\r\n\t\t\t\t\t\t\t\t\t\"\") as string\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tonChange={(e) =>\r\n\t\t\t\t\t\t\t\ttable.getColumn(\"name\")?.setFilterValue(e.target.value)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\tplaceholder=\"Filter by name or email...\"\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\taria-label=\"Filter by name or email\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<div className=\"text-muted-foreground/80 pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 peer-disabled:opacity-50\">\r\n\t\t\t\t\t\t\t<ListFilterIcon size={16} aria-hidden=\"true\" />\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t{Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\r\n\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 inset-e-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-hidden focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\r\n\t\t\t\t\t\t\t\taria-label=\"Clear filter\"\r\n\t\t\t\t\t\t\t\tonClick={() => {\r\n\t\t\t\t\t\t\t\t\ttable.getColumn(\"name\")?.setFilterValue(\"\");\r\n\t\t\t\t\t\t\t\t\tif (inputRef.current) {\r\n\t\t\t\t\t\t\t\t\t\tinputRef.current.focus();\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<CircleXIcon size={16} aria-hidden=\"true\" />\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t{/* Filter by status */}\r\n\t\t\t\t\t<Popover>\r\n\t\t\t\t\t\t<PopoverTrigger asChild>\r\n\t\t\t\t\t\t\t<Button variant=\"outline\">\r\n\t\t\t\t\t\t\t\t<FilterIcon\r\n\t\t\t\t\t\t\t\t\tclassName=\"-ms-1 opacity-60\"\r\n\t\t\t\t\t\t\t\t\tsize={16}\r\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\tStatus\r\n\t\t\t\t\t\t\t\t{selectedStatuses.length > 0 && (\r\n\t\t\t\t\t\t\t\t\t<span className=\"bg-background text-muted-foreground/70 -me-1 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium\">\r\n\t\t\t\t\t\t\t\t\t\t{selectedStatuses.length}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t</PopoverTrigger>\r\n\t\t\t\t\t\t<PopoverContent className=\"w-auto min-w-36 p-3\" align=\"start\">\r\n\t\t\t\t\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t\t\t\t\t<div className=\"text-muted-foreground text-xs font-medium\">\r\n\t\t\t\t\t\t\t\t\tFilters\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div className=\"space-y-3\">\r\n\t\t\t\t\t\t\t\t\t{uniqueStatusValues.map((value, i) => (\r\n\t\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\t\tkey={value}\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center gap-2\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<Checkbox\r\n\t\t\t\t\t\t\t\t\t\t\t\tid={`${id}-${i}`}\r\n\t\t\t\t\t\t\t\t\t\t\t\tchecked={selectedStatuses.includes(value)}\r\n\t\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(checked: boolean) =>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\thandleStatusChange(checked, value)\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t<Label\r\n\t\t\t\t\t\t\t\t\t\t\t\thtmlFor={`${id}-${i}`}\r\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex grow justify-between gap-2 font-normal\"\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{value}{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground ms-2 text-xs\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{statusCounts.get(value)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</PopoverContent>\r\n\t\t\t\t\t</Popover>\r\n\t\t\t\t\t{/* Toggle columns visibility */}\r\n\t\t\t\t\t<DropdownMenu>\r\n\t\t\t\t\t\t<DropdownMenuTrigger asChild>\r\n\t\t\t\t\t\t\t<Button variant=\"outline\">\r\n\t\t\t\t\t\t\t\t<Columns3Icon\r\n\t\t\t\t\t\t\t\t\tclassName=\"-ms-1 opacity-60\"\r\n\t\t\t\t\t\t\t\t\tsize={16}\r\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\tView\r\n\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t</DropdownMenuTrigger>\r\n\t\t\t\t\t\t<DropdownMenuContent align=\"end\">\r\n\t\t\t\t\t\t\t<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\r\n\t\t\t\t\t\t\t{table\r\n\t\t\t\t\t\t\t\t.getAllColumns()\r\n\t\t\t\t\t\t\t\t.filter((column) => column.getCanHide())\r\n\t\t\t\t\t\t\t\t.map((column) => {\r\n\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuCheckboxItem\r\n\t\t\t\t\t\t\t\t\t\t\tkey={column.id}\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"capitalize\"\r\n\t\t\t\t\t\t\t\t\t\t\tchecked={column.getIsVisible()}\r\n\t\t\t\t\t\t\t\t\t\t\tonCheckedChange={(value) =>\r\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn.toggleVisibility(!!value)\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\tonSelect={(event) => event.preventDefault()}\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t{column.id}\r\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuCheckboxItem>\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t</DropdownMenuContent>\r\n\t\t\t\t\t</DropdownMenu>\r\n\t\t\t\t</div>\r\n\t\t\t\t<div className=\"flex items-center gap-3\">\r\n\t\t\t\t\t{/* Delete button */}\r\n\t\t\t\t\t{table.getSelectedRowModel().rows.length > 0 && (\r\n\t\t\t\t\t\t<AlertDialog>\r\n\t\t\t\t\t\t\t<AlertDialogTrigger asChild>\r\n\t\t\t\t\t\t\t\t<Button className=\"ml-auto\" variant=\"outline\">\r\n\t\t\t\t\t\t\t\t\t<TrashIcon\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"-ms-1 opacity-60\"\r\n\t\t\t\t\t\t\t\t\t\tsize={16}\r\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\tDelete\r\n\t\t\t\t\t\t\t\t\t<span className=\"bg-background text-muted-foreground/70 -me-1 inline-flex h-5 max-h-full items-center rounded border px-1 font-[inherit] text-[0.625rem] font-medium\">\r\n\t\t\t\t\t\t\t\t\t\t{table.getSelectedRowModel().rows.length}\r\n\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t</AlertDialogTrigger>\r\n\t\t\t\t\t\t\t<AlertDialogContent>\r\n\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\r\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<CircleAlertIcon\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"opacity-80\"\r\n\t\t\t\t\t\t\t\t\t\t\tsize={16}\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<AlertDialogHeader>\r\n\t\t\t\t\t\t\t\t\t\t<AlertDialogTitle>\r\n\t\t\t\t\t\t\t\t\t\t\tAre you absolutely sure?\r\n\t\t\t\t\t\t\t\t\t\t</AlertDialogTitle>\r\n\t\t\t\t\t\t\t\t\t\t<AlertDialogDescription>\r\n\t\t\t\t\t\t\t\t\t\t\tThis action cannot be undone. This will\r\n\t\t\t\t\t\t\t\t\t\t\tpermanently delete{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t{table.getSelectedRowModel().rows.length}{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\tselected{\" \"}\r\n\t\t\t\t\t\t\t\t\t\t\t{table.getSelectedRowModel().rows.length === 1\r\n\t\t\t\t\t\t\t\t\t\t\t\t? \"row\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t: \"rows\"}\r\n\t\t\t\t\t\t\t\t\t\t\t.\r\n\t\t\t\t\t\t\t\t\t\t</AlertDialogDescription>\r\n\t\t\t\t\t\t\t\t\t</AlertDialogHeader>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<AlertDialogFooter>\r\n\t\t\t\t\t\t\t\t\t<AlertDialogCancel>Cancel</AlertDialogCancel>\r\n\t\t\t\t\t\t\t\t\t<AlertDialogAction onClick={handleDeleteRows}>\r\n\t\t\t\t\t\t\t\t\t\tDelete\r\n\t\t\t\t\t\t\t\t\t</AlertDialogAction>\r\n\t\t\t\t\t\t\t\t</AlertDialogFooter>\r\n\t\t\t\t\t\t\t</AlertDialogContent>\r\n\t\t\t\t\t\t</AlertDialog>\r\n\t\t\t\t\t)}\r\n\t\t\t\t\t{/* Add user button */}\r\n\t\t\t\t\t<Button className=\"ml-auto\" variant=\"outline\">\r\n\t\t\t\t\t\t<PlusIcon\r\n\t\t\t\t\t\t\tclassName=\"-ms-1 opacity-60\"\r\n\t\t\t\t\t\t\tsize={16}\r\n\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\tAdd user\r\n\t\t\t\t\t</Button>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t\t{/* Table */}\r\n\t\t\t<div className=\"bg-background overflow-hidden rounded-md border\">\r\n\t\t\t\t<Table className=\"table-fixed\">\r\n\t\t\t\t\t<TableHeader>\r\n\t\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\r\n\t\t\t\t\t\t\t<TableRow\r\n\t\t\t\t\t\t\t\tkey={headerGroup.id}\r\n\t\t\t\t\t\t\t\tclassName=\"hover:bg-transparent\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{headerGroup.headers.map((header) => {\r\n\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t<TableHead\r\n\t\t\t\t\t\t\t\t\t\t\tkey={header.id}\r\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ width: `${header.getSize()}px` }}\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-11\"\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder ? null : header.column.getCanSort() ? (\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort() &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"flex h-full cursor-pointer items-center justify-between gap-2 select-none\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t// Enhanced keyboard handling for sorting\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort() &&\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(e.key === \"Enter\" ||\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te.key === \" \")\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getToggleSortingHandler()?.(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort()\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{flexRender(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext()\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tasc: (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ChevronUpIcon\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"shrink-0 opacity-60\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize={16}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdesc: (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ChevronDownIcon\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"shrink-0 opacity-60\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize={16}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}[\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIsSorted() as string\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t] ?? null}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t\t\tflexRender(\r\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext()\r\n\t\t\t\t\t\t\t\t\t\t\t\t)\r\n\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t</TableHead>\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t</TableRow>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</TableHeader>\r\n\t\t\t\t\t<TableBody>\r\n\t\t\t\t\t\t{table.getRowModel().rows?.length ? (\r\n\t\t\t\t\t\t\ttable.getRowModel().rows.map((row) => (\r\n\t\t\t\t\t\t\t\t<TableRow\r\n\t\t\t\t\t\t\t\t\tkey={row.id}\r\n\t\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\r\n\t\t\t\t\t\t\t\t\t\t<TableCell key={cell.id} className=\"last:py-0\">\r\n\t\t\t\t\t\t\t\t\t\t\t{flexRender(\r\n\t\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\r\n\t\t\t\t\t\t\t\t\t\t\t\tcell.getContext()\r\n\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t</TableCell>\r\n\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t</TableRow>\r\n\t\t\t\t\t\t\t))\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t<TableRow>\r\n\t\t\t\t\t\t\t\t<TableCell\r\n\t\t\t\t\t\t\t\t\tcolSpan={columns.length}\r\n\t\t\t\t\t\t\t\t\tclassName=\"h-24 text-center\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\tNo results.\r\n\t\t\t\t\t\t\t\t</TableCell>\r\n\t\t\t\t\t\t\t</TableRow>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</TableBody>\r\n\t\t\t\t</Table>\r\n\t\t\t</div>\r\n\r\n\t\t\t{/* Pagination */}\r\n\t\t\t<div className=\"flex items-center justify-between gap-8\">\r\n\t\t\t\t{/* Results per page */}\r\n\t\t\t\t<div className=\"flex items-center gap-3\">\r\n\t\t\t\t\t<Label htmlFor={id} className=\"max-sm:sr-only\">\r\n\t\t\t\t\t\tRows per page\r\n\t\t\t\t\t</Label>\r\n\t\t\t\t\t<Select\r\n\t\t\t\t\t\tvalue={table.getState().pagination.pageSize.toString()}\r\n\t\t\t\t\t\tonValueChange={(value) => {\r\n\t\t\t\t\t\t\ttable.setPageSize(Number(value));\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<SelectTrigger id={id} className=\"w-fit whitespace-nowrap\">\r\n\t\t\t\t\t\t\t<SelectValue placeholder=\"Select number of results\" />\r\n\t\t\t\t\t\t</SelectTrigger>\r\n\t\t\t\t\t\t<SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:inset-e-2\">\r\n\t\t\t\t\t\t\t{[5, 10, 25, 50].map((pageSize) => (\r\n\t\t\t\t\t\t\t\t<SelectItem key={pageSize} value={pageSize.toString()}>\r\n\t\t\t\t\t\t\t\t\t{pageSize}\r\n\t\t\t\t\t\t\t\t</SelectItem>\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t</SelectContent>\r\n\t\t\t\t\t</Select>\r\n\t\t\t\t</div>\r\n\t\t\t\t{/* Page number information */}\r\n\t\t\t\t<div className=\"text-muted-foreground flex grow justify-end text-sm whitespace-nowrap\">\r\n\t\t\t\t\t<p\r\n\t\t\t\t\t\tclassName=\"text-muted-foreground text-sm whitespace-nowrap\"\r\n\t\t\t\t\t\taria-live=\"polite\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span className=\"text-foreground\">\r\n\t\t\t\t\t\t\t{table.getState().pagination.pageIndex *\r\n\t\t\t\t\t\t\t\ttable.getState().pagination.pageSize +\r\n\t\t\t\t\t\t\t\t1}\r\n\t\t\t\t\t\t\t-\r\n\t\t\t\t\t\t\t{Math.min(\r\n\t\t\t\t\t\t\t\tMath.max(\r\n\t\t\t\t\t\t\t\t\ttable.getState().pagination.pageIndex *\r\n\t\t\t\t\t\t\t\t\t\ttable.getState().pagination.pageSize +\r\n\t\t\t\t\t\t\t\t\t\ttable.getState().pagination.pageSize,\r\n\t\t\t\t\t\t\t\t\t0\r\n\t\t\t\t\t\t\t\t),\r\n\t\t\t\t\t\t\t\ttable.getRowCount()\r\n\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t</span>{\" \"}\r\n\t\t\t\t\t\tof{\" \"}\r\n\t\t\t\t\t\t<span className=\"text-foreground\">\r\n\t\t\t\t\t\t\t{table.getRowCount().toString()}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</p>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t{/* Pagination buttons */}\r\n\t\t\t\t<div>\r\n\t\t\t\t\t<Pagination>\r\n\t\t\t\t\t\t<PaginationContent>\r\n\t\t\t\t\t\t\t{/* First page button */}\r\n\t\t\t\t\t\t\t<PaginationItem>\r\n\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\r\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"disabled:pointer-events-none disabled:opacity-50\"\r\n\t\t\t\t\t\t\t\t\tonClick={() => table.firstPage()}\r\n\t\t\t\t\t\t\t\t\tdisabled={!table.getCanPreviousPage()}\r\n\t\t\t\t\t\t\t\t\taria-label=\"Go to first page\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<ChevronFirstIcon size={16} aria-hidden=\"true\" />\r\n\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t</PaginationItem>\r\n\t\t\t\t\t\t\t{/* Previous page button */}\r\n\t\t\t\t\t\t\t<PaginationItem>\r\n\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\r\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"disabled:pointer-events-none disabled:opacity-50\"\r\n\t\t\t\t\t\t\t\t\tonClick={() => table.previousPage()}\r\n\t\t\t\t\t\t\t\t\tdisabled={!table.getCanPreviousPage()}\r\n\t\t\t\t\t\t\t\t\taria-label=\"Go to previous page\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<ChevronLeftIcon size={16} aria-hidden=\"true\" />\r\n\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t</PaginationItem>\r\n\t\t\t\t\t\t\t{/* Next page button */}\r\n\t\t\t\t\t\t\t<PaginationItem>\r\n\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\r\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"disabled:pointer-events-none disabled:opacity-50\"\r\n\t\t\t\t\t\t\t\t\tonClick={() => table.nextPage()}\r\n\t\t\t\t\t\t\t\t\tdisabled={!table.getCanNextPage()}\r\n\t\t\t\t\t\t\t\t\taria-label=\"Go to next page\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<ChevronRightIcon size={16} aria-hidden=\"true\" />\r\n\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t</PaginationItem>\r\n\t\t\t\t\t\t\t{/* Last page button */}\r\n\t\t\t\t\t\t\t<PaginationItem>\r\n\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\tsize=\"icon\"\r\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\r\n\t\t\t\t\t\t\t\t\tclassName=\"disabled:pointer-events-none disabled:opacity-50\"\r\n\t\t\t\t\t\t\t\t\tonClick={() => table.lastPage()}\r\n\t\t\t\t\t\t\t\t\tdisabled={!table.getCanNextPage()}\r\n\t\t\t\t\t\t\t\t\taria-label=\"Go to last page\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<ChevronLastIcon size={16} aria-hidden=\"true\" />\r\n\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t</PaginationItem>\r\n\t\t\t\t\t\t</PaginationContent>\r\n\t\t\t\t\t</Pagination>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<p className=\"text-muted-foreground mt-4 text-center text-sm\">\r\n\t\t\t\tExample of a more complex table made with{\" \"}\r\n\t\t\t\t<a\r\n\t\t\t\t\tclassName=\"hover:text-foreground underline\"\r\n\t\t\t\t\thref=\"https://tanstack.com/table\"\r\n\t\t\t\t\ttarget=\"_blank\"\r\n\t\t\t\t\trel=\"noopener noreferrer\"\r\n\t\t\t\t>\r\n\t\t\t\t\tTanStack Table\r\n\t\t\t\t</a>\r\n\t\t\t</p>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nfunction RowActions({ row }: { row: Row<Item> }) {\r\n\treturn (\r\n\t\t<DropdownMenu>\r\n\t\t\t<DropdownMenuTrigger asChild>\r\n\t\t\t\t<div className=\"flex justify-end\">\r\n\t\t\t\t\t<Button\r\n\t\t\t\t\t\tsize=\"icon\"\r\n\t\t\t\t\t\tvariant=\"ghost\"\r\n\t\t\t\t\t\tclassName=\"shadow-none\"\r\n\t\t\t\t\t\taria-label=\"Edit item\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<EllipsisIcon size={16} aria-hidden=\"true\" />\r\n\t\t\t\t\t</Button>\r\n\t\t\t\t</div>\r\n\t\t\t</DropdownMenuTrigger>\r\n\t\t\t<DropdownMenuContent align=\"end\">\r\n\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t<span>Edit</span>\r\n\t\t\t\t\t\t<DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\r\n\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t<span>Duplicate</span>\r\n\t\t\t\t\t\t<DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\r\n\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t<DropdownMenuItem>\r\n\t\t\t\t\t\t<span>Archive</span>\r\n\t\t\t\t\t\t<DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\r\n\t\t\t\t\t</DropdownMenuItem>\r\n\t\t\t\t\t<DropdownMenuSub>\r\n\t\t\t\t\t\t<DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\r\n\t\t\t\t\t\t<DropdownMenuPortal>\r\n\t\t\t\t\t\t\t<DropdownMenuSubContent>\r\n\t\t\t\t\t\t\t\t<DropdownMenuItem>Move to project</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<DropdownMenuItem>Move to folder</DropdownMenuItem>\r\n\t\t\t\t\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t\t\t\t\t<DropdownMenuItem>Advanced options</DropdownMenuItem>\r\n\t\t\t\t\t\t\t</DropdownMenuSubContent>\r\n\t\t\t\t\t\t</DropdownMenuPortal>\r\n\t\t\t\t\t</DropdownMenuSub>\r\n\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t<DropdownMenuGroup>\r\n\t\t\t\t\t<DropdownMenuItem>Share</DropdownMenuItem>\r\n\t\t\t\t\t<DropdownMenuItem>Add to favorites</DropdownMenuItem>\r\n\t\t\t\t</DropdownMenuGroup>\r\n\t\t\t\t<DropdownMenuSeparator />\r\n\t\t\t\t<DropdownMenuItem className=\"text-destructive focus:text-destructive\">\r\n\t\t\t\t\t<span>Delete</span>\r\n\t\t\t\t\t<DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\r\n\t\t\t\t</DropdownMenuItem>\r\n\t\t\t</DropdownMenuContent>\r\n\t\t</DropdownMenu>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/badge.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst badgeVariants = cva(\r\n\t\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tdefault:\r\n\t\t\t\t\t\"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n\t\t\t\toutline: \"text-foreground\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface BadgeProps\r\n\textends React.HTMLAttributes<HTMLDivElement>,\r\n\t\tVariantProps<typeof badgeVariants> {}\r\n\r\nfunction Badge({ className, variant, ...props }: BadgeProps) {\r\n\treturn (\r\n\t\t<div className={cn(badgeVariants({ variant }), className)} {...props} />\r\n\t);\r\n}\r\n\r\nexport { Badge, badgeVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/checkbox.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\r\nimport { Check } from \"lucide-react\";\r\n\r\nconst Checkbox = React.forwardRef<\r\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\r\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n\t<CheckboxPrimitive.Root\r\n\t\tref={ref}\r\n\t\tclassName={cn(\r\n\t\t\t\"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t>\r\n\t\t<CheckboxPrimitive.Indicator\r\n\t\t\tclassName={cn(\"flex items-center justify-center text-current\")}\r\n\t\t>\r\n\t\t\t<Check className=\"h-4 w-4\" />\r\n\t\t</CheckboxPrimitive.Indicator>\r\n\t</CheckboxPrimitive.Root>\r\n));\r\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\r\n\r\nexport { Checkbox };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/input.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/label.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n\t\tVariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n\t<LabelPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(labelVariants(), className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",
      "type": "registry:ui"
    }
  ]
}