Icon Field

1"use client";
2 
3import { Check, ChevronsUpDown, icons } from "lucide-react";
4import type { OptionObject, SelectFieldClientProps } from "payload";
5import { useField } from "@payloadcms/ui";
6import {
7  Command,
8  CommandEmpty,
9  CommandGroup,
10  CommandInput,
11  CommandItem,
12  CommandList,
13} from "@/registry/ui/command";
14 
15import { Popover, PopoverContent, PopoverTrigger } from "@/registry/ui/popover";
16import { cn } from "@/registry/default/utils";
17import { useState, type Dispatch, type SetStateAction } from "react";
18import { Button } from "@/registry/ui/button";
19 
20type IconName = keyof typeof icons;
21 
22function Icon({
23  icon,
24  index,
25  value,
26  setValue,
27  setOpen,
28}: {
29  icon: OptionObject;
30  index: number;
31  value: IconName;
32  setValue: (val: unknown, disableModifyingForm?: boolean) => void;
33  setOpen: Dispatch<SetStateAction<boolean>>;
34}) {
35  const SelectIcon = icons[icon.value as IconName];
36  return (
37    <CommandItem
38      value={icon.value}
39      onSelect={(currentValue) => {
40        setValue(currentValue === value ? "" : currentValue);
41        setOpen(false);
42      }}
43      key={`${index}-${icon.value}`}
44      className="cursor-pointer transition-colors duration-400 hover:bg-neutral-300"
45    >
46      <SelectIcon />
47      {icon.value}
48      <Check
49        className={cn(
50          "ml-auto opacity-0",
51          value === icon.label && "opacity-100",
52        )}
53      />
54    </CommandItem>
55  );
56}
57 
58export default function IconField({ field, path }: SelectFieldClientProps) {
59  const { value, setValue } = useField<IconName>({ path });
60  const [open, setOpen] = useState(false);
61  const SelectIcon = icons[value];
62 
63  return (
64    <div className="">
65      <label>
66        {field.label as string}
67        {field.required ? <span className="pl-1 text-red-500">*</span> : ""}
68      </label>
69      <Popover open={open} onOpenChange={setOpen}>
70        <PopoverTrigger asChild className="mt-2 w-full cursor-pointer">
71          <Button
72            variant="outline"
73            role="combobox"
74            aria-expanded={open}
75            className="justify-between"
76          >
77            {SelectIcon && <SelectIcon />}
78            {value ? value : "Select Icon..."}
79            <ChevronsUpDown className="opacity-50" />
80          </Button>
81        </PopoverTrigger>
82        <PopoverContent className="w-[var(--radix-popover-trigger-width)] bg-neutral-200 dark:bg-neutral-600">
83          <Command value={value}>
84            <CommandInput
85              placeholder="Search Icons..."
86// … truncated