Icon Picker Multiple

1"use client";
2 
3import * as React from "react";
4import { icons, XIcon } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7import { useDebounce } from "@/hooks/use-debounce";
8 
9import { Input } from "@/components/ui/input";
10import { ScrollArea } from "@/components/ui/scroll-area";
11import { Button } from "@/components/ui/button";
12 
13const IconItem = React.memo(
14  ({
15    iconName,
16    toggleSelectedIcon,
17    selectedIcons,
18  }: {
19    iconName: string;
20    toggleSelectedIcon?: (iconName: string) => void;
21    selectedIcons?: string[];
22  }) => {
23    const Icon = icons[iconName as keyof typeof icons];
24    const isSelected = selectedIcons?.includes(iconName);
25 
26    const handleClick = React.useCallback(() => {
27      toggleSelectedIcon?.(iconName);
28    }, [iconName, toggleSelectedIcon]);
29 
30    return (
31      <button
32        className={cn(
33          "flex items-center justify-center size-7 rounded-md cursor-pointer text-popover-foreground/70 hover:bg-muted hover:text-popover-foreground transition-colors",
34          isSelected &&
35            "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
36        )}
37        onClick={handleClick}
38        title={iconName}
39        aria-label={`${isSelected ? "Deselect" : "Select"} ${iconName} icon`}
40        aria-pressed={isSelected}
41      >
42        <Icon size={16} />
43      </button>
44    );
45  },
46);
47IconItem.displayName = "IconItem";
48 
49const IconPicker = React.memo(
50  ({
51    setSelectedIcons,
52    selectedIcons = [],
53    className,
54    ...props
55  }: {
56    setSelectedIcons?: (iconNames: string[]) => void;
57    selectedIcons?: string[];
58  } & React.ComponentProps<"div">) => {
59    const [searchQuery, setSearchQuery] = React.useState("");
60    const debouncedSearchQuery = useDebounce(searchQuery, 200);
61    const iconsMap = React.useMemo(() => Object.keys(icons), []);
62 
63    const filteredIcons = React.useMemo(() => {
64      if (!debouncedSearchQuery.trim()) return iconsMap;
65      return iconsMap.filter((iconName) =>
66        iconName.toLowerCase().includes(debouncedSearchQuery.toLowerCase()),
67      );
68    }, [iconsMap, debouncedSearchQuery]);
69 
70    const selectedIconsRef = React.useRef(selectedIcons);
71    React.useEffect(() => {
72      selectedIconsRef.current = selectedIcons;
73    }, [selectedIcons]);
74 
75    const toggleSelectedIcon = React.useCallback(
76      (iconName: string) => {
77        if (!setSelectedIcons) return;
78        const current = selectedIconsRef.current;
79 
80        setSelectedIcons(
81// … truncated