All files / src/components IconPicker.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useState } from 'react';
import {
  Globe,
  Link,
  ExternalLink,
  Book,
  FileText,
  Home,
  Star,
  Heart,
  Bookmark,
  ShoppingCart,
  Music,
  Video,
  Image,
  Camera,
  Map,
  Compass,
  Coffee,
  Gift,
  Wrench,
  Zap,
  Cloud,
  Database,
  Folder,
  Mail,
  Phone,
  User,
  Users,
  Server,
  Terminal,
  Code,
  type LucideIcon,
} from 'lucide-react';
 
// Available icons for external links
export const AVAILABLE_ICONS: { name: string; icon: LucideIcon }[] = [
  { name: 'globe', icon: Globe },
  { name: 'link', icon: Link },
  { name: 'external-link', icon: ExternalLink },
  { name: 'book', icon: Book },
  { name: 'file-text', icon: FileText },
  { name: 'home', icon: Home },
  { name: 'star', icon: Star },
  { name: 'heart', icon: Heart },
  { name: 'bookmark', icon: Bookmark },
  { name: 'shopping-cart', icon: ShoppingCart },
  { name: 'music', icon: Music },
  { name: 'video', icon: Video },
  { name: 'image', icon: Image },
  { name: 'camera', icon: Camera },
  { name: 'map', icon: Map },
  { name: 'compass', icon: Compass },
  { name: 'coffee', icon: Coffee },
  { name: 'gift', icon: Gift },
  { name: 'wrench', icon: Wrench },
  { name: 'zap', icon: Zap },
  { name: 'cloud', icon: Cloud },
  { name: 'database', icon: Database },
  { name: 'folder', icon: Folder },
  { name: 'mail', icon: Mail },
  { name: 'phone', icon: Phone },
  { name: 'user', icon: User },
  { name: 'users', icon: Users },
  { name: 'server', icon: Server },
  { name: 'terminal', icon: Terminal },
  { name: 'code', icon: Code },
];
 
// Helper to get icon component by name
export function getIconByName(name: string): LucideIcon {
  const found = AVAILABLE_ICONS.find((i) => i.name === name);
  return found?.icon || Link;
}
 
interface IconPickerProps {
  value: string;
  onChange: (value: string) => void;
}
 
export function IconPicker({ value, onChange }: IconPickerProps) {
  const [isOpen, setIsOpen] = useState(false);
 
  const SelectedIcon = getIconByName(value);
 
  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-2 bg-bambu-dark border border-bambu-dark-tertiary rounded-lg text-white hover:border-bambu-gray focus:border-bambu-green focus:outline-none w-full"
      >
        <SelectedIcon className="w-5 h-5" />
        <span className="text-sm text-bambu-gray flex-1 text-left">{value}</span>
      </button>
 
      {isOpen && (
        <>
          {/* Backdrop */}
          <div
            className="fixed inset-0 z-40"
            onClick={() => setIsOpen(false)}
          />
 
          {/* Dropdown */}
          <div className="absolute z-50 mt-1 w-full max-h-64 overflow-y-auto bg-bambu-dark-secondary border border-bambu-dark-tertiary rounded-lg shadow-lg">
            <div className="grid grid-cols-5 gap-1 p-2">
              {AVAILABLE_ICONS.map(({ name, icon: Icon }) => (
                <button
                  key={name}
                  type="button"
                  onClick={() => {
                    onChange(name);
                    setIsOpen(false);
                  }}
                  className={`p-2 rounded-lg transition-colors flex items-center justify-center ${
                    value === name
                      ? 'bg-bambu-green text-white'
                      : 'hover:bg-bambu-dark-tertiary text-bambu-gray hover:text-white'
                  }`}
                  title={name}
                >
                  <Icon className="w-5 h-5" />
                </button>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
  );
}