Icon Picker Custom Color

1"use client";
2 
3import * as React from "react";
4import { icons, PaletteIcon } 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 {
12  Popover,
13  PopoverContent,
14  PopoverTrigger,
15} from "@/components/ui/popover";
16import { Button } from "@/components/ui/button";
17import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
18 
19const IconItem = React.memo(
20  ({
21    iconName,
22    setSelectedIcon,
23    selectedIcon,
24  }: {
25    iconName: string;
26    setSelectedIcon?: (iconName: string) => void;
27    selectedIcon?: string | null;
28  }) => {
29    const Icon = icons[iconName as keyof typeof icons];
30 
31    const handleClick = React.useCallback(() => {
32      setSelectedIcon?.(iconName);
33    }, [iconName, setSelectedIcon]);
34 
35    return (
36      <button
37        className={cn(
38          "flex items-center justify-center size-7 rounded-md cursor-pointer text-popover-foreground/70 hover:bg-muted hover:text-popover-foreground transition-colors",
39          selectedIcon === iconName &&
40            "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
41        )}
42        onClick={handleClick}
43        title={iconName}
44        aria-label={`Select ${iconName} icon`}
45        aria-pressed={selectedIcon === iconName}
46      >
47        <Icon size={16} />
48      </button>
49    );
50  },
51);
52 
53IconItem.displayName = "IconItem";
54 
55const IconPicker = React.memo(
56  ({
57    setSelectedIcon,
58    selectedIcon,
59    setSelectedColor,
60    selectedColor,
61    className,
62    ...props
63  }: {
64    setSelectedIcon?: (iconName: string) => void;
65    selectedIcon?: string | null;
66    selectedColor?: string;
67    setSelectedColor?: (color: string) => void;
68  } & React.ComponentProps<"div">) => {
69    const [searchQuery, setSearchQuery] = React.useState("");
70    const debouncedSearchQuery = useDebounce(searchQuery, 200);
71 
72    const iconsMap = React.useMemo(() => Object.keys(icons), []);
73 
74    const filteredIcons = React.useMemo(() => {
75      if (!debouncedSearchQuery.trim()) return iconsMap;
76      return iconsMap.filter((iconName) =>
77        iconName.toLowerCase().includes(debouncedSearchQuery.toLowerCase()),
78      );
79    }, [iconsMap, debouncedSearchQuery]);
80 
81    const handleSearchChange = React.useCallback(
82      (e: React.ChangeEvent<HTMLInputElement>) => {
83        setSearchQuery(e.target.value);
84      },
85      [],
86// … truncated