Icon Picker

1"use client";
2 
3import * as React from "react";
4import { icons } 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";
11 
12const IconItem = React.memo(
13  ({
14    iconName,
15    setSelectedIcon,
16    selectedIcon,
17  }: {
18    iconName: string;
19    setSelectedIcon?: (iconName: string) => void;
20    selectedIcon?: string | null;
21  }) => {
22    const Icon = icons[iconName as keyof typeof icons];
23 
24    const handleClick = React.useCallback(() => {
25      setSelectedIcon?.(iconName);
26    }, [iconName, setSelectedIcon]);
27 
28    return (
29      <button
30        className={cn(
31          "flex items-center justify-center size-7 rounded-md cursor-pointer text-popover-foreground/70 hover:bg-muted hover:text-popover-foreground transition-colors",
32          selectedIcon === iconName &&
33            "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
34        )}
35        onClick={handleClick}
36        title={iconName}
37        aria-label={`Select ${iconName} icon`}
38        aria-pressed={selectedIcon === iconName}
39      >
40        <Icon size={16} />
41      </button>
42    );
43  },
44);
45 
46IconItem.displayName = "IconItem";
47 
48const IconPicker = React.memo(
49  ({
50    setSelectedIcon,
51    selectedIcon,
52    className,
53    ...props
54  }: {
55    setSelectedIcon?: (iconName: string) => void;
56    selectedIcon?: string | null;
57  } & React.ComponentProps<"div">) => {
58    const [searchQuery, setSearchQuery] = React.useState("");
59    const debouncedSearchQuery = useDebounce(searchQuery, 200);
60 
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 handleSearchChange = React.useCallback(
71      (e: React.ChangeEvent<HTMLInputElement>) => {
72        setSearchQuery(e.target.value);
73      },
74      [],
75    );
76 
77    return (
78      <div
79        className={cn(
80          "max-w-72 bg-popover rounded-lg border shadow-md",
81          className,
82        )}
83        aria-label="Icon picker"
84        {...props}
85      >
86        <div className="relative mt-1.5 mx-1.5">
87          <Input
88            autoComplete="off"
89            autoCorrect="off"
90// … truncated