Lucide Icon Picker

1'use client'
2import {
3  AnimateHeight,
4  Button,
5  ChevronIcon,
6  Drawer,
7  FieldDescription,
8  FieldError,
9  FieldLabel,
10  TextInput,
11  useField,
12  useModal,
13  useTranslation,
14} from '@payloadcms/ui'
15import { DefaultCellComponentProps, TextFieldClient, TextFieldClientProps } from 'payload'
16import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
17import './style.scss'
18import { IconData, IconPickerProps } from './types'
19import { DynamicIcon, IconName } from 'lucide-react/dynamic'
20import { iconsData } from './icons'
21import { useVirtualizer } from '@tanstack/react-virtual'
22import Fuse from 'fuse.js'
23import { useDebounceValue } from 'usehooks-ts'
24 
25interface TooltipProps {
26  content: string
27  children: React.ReactNode
28}
29 
30const Tooltip: React.FC<TooltipProps> = React.memo(({ content, children }) => {
31  return (
32    <div className="icon-picker__tooltip-wrapper">
33      {children}
34      <div className="icon-picker__tooltip">{content}</div>
35    </div>
36  )
37})
38Tooltip.displayName = 'Tooltip'
39 
40// Loading Skeleton Component
41const IconsGridSkeleton: React.FC = () => {
42  return (
43    <div className="icon-picker__skeleton">
44      <div className="icon-picker__skeleton-category" />
45      <div className="icon-picker__skeleton-grid">
46        {Array.from({ length: 40 }).map((_, i) => (
47          <div key={i} className="icon-picker__skeleton-item" />
48        ))}
49      </div>
50    </div>
51  )
52}
53 
54// Icon Renderer Component
55interface IconRendererProps {
56  name: string
57  size?: number
58}
59 
60const IconRenderer: React.FC<IconRendererProps> = React.memo(({ name, size = 20 }) => {
61  return <DynamicIcon name={name as IconName} size={size} />
62})
63IconRenderer.displayName = 'IconRenderer'
64 
65// Icon Button Component
66interface IconButtonProps {
67  icon: IconData
68  isSelected: boolean
69  onSelect: (iconName: string) => void
70  disabled?: boolean
71}
72 
73const IconButton: React.FC<IconButtonProps> = React.memo(
74  ({ icon, isSelected, onSelect, disabled }) => {
75    return (
76      <Tooltip content={icon.name}>
77        <button
78          type="button"
79          className={
80            isSelected
81              ? 'icon-picker__icon-button icon-picker__icon-button--selected'
82              : 'icon-picker__icon-button'
83          }
84          onClick={() => onSelect(icon.name)}
85          disabled={disabled}
86          aria-label={`Select ${icon.name} icon`}
87        >
88          <IconRenderer name={icon.name} size={24} />
89        </button>
90      </Tooltip>
91    )
92  },
93  (prevProps, nextProps) => {
94// … truncated