Icon Picker

1"use client";
2 
3import * as React from "react";
4import { useState, useMemo, useCallback, useEffect } from "react";
5import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
6import { Button } from "@/components/ui/button";
7import { Input } from "@/components/ui/input";
8import { cn } from "@/lib/utils";
9import { LucideProps, LucideIcon } from 'lucide-react';
10import { DynamicIcon, dynamicIconImports, IconName } from 'lucide-react/dynamic';
11import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
12import { iconsData } from "./icons-data";
13import { useVirtualizer, VirtualItem } from '@tanstack/react-virtual';
14import { Skeleton } from "@/components/ui/skeleton";
15import Fuse from 'fuse.js';
16import { useDebounceValue } from "usehooks-ts";
17 
18export type IconData = typeof iconsData[number];
19 
20interface IconPickerProps extends Omit<React.ComponentPropsWithoutRef<typeof PopoverTrigger>, 'onSelect' | 'onOpenChange'> {
21  value?: IconName
22  defaultValue?: IconName
23  onValueChange?: (value: IconName) => void
24  open?: boolean
25  defaultOpen?: boolean
26  onOpenChange?: (open: boolean) => void
27  searchable?: boolean
28  searchPlaceholder?: string
29  triggerPlaceholder?: string
30  iconsList?: IconData[]
31  categorized?: boolean
32  modal?: boolean
33}
34 
35const IconRenderer = React.memo(({ name }: { name: IconName }) => {
36  return <Icon name={name} />;
37});
38IconRenderer.displayName = "IconRenderer";
39 
40const IconsColumnSkeleton = () => {
41  return (
42    <div className="flex flex-col gap-2 w-full">
43      <Skeleton className="h-4 w-1/2 rounded-md" />
44      <div className="grid grid-cols-5 gap-2 w-full">
45        {
46          Array.from({ length: 40 }).map((_, i) => (
47          <Skeleton key={i} className="h-10 w-10 rounded-md" />
48        ))
49      }
50      </div>
51    </div>
52  )
53}
54 
55const useIconsData = () => {
56  const [icons, setIcons] = useState<IconData[]>([]);
57  const [isLoading, setIsLoading] = useState(true);
58 
59  useEffect(() => {
60    let isMounted = true;
61    
62    const loadIcons = async () => {
63      setIsLoading(true);
64 
65      const { iconsData } = await import('./icons-data');
66      if (isMounted) {
67        setIcons(iconsData.filter((icon: IconData) => {
68          return icon.name in dynamicIconImports;
69        }));
70        setIsLoading(false);
71      }
72    };
73 
74    loadIcons();
75    
76    return () => {
77      isMounted = false;
78    };
79  }, []);
80 
81  return { icons, isLoading };
82};
83 
84const IconPicker = React.forwardRef<
85// … truncated