import React, { useState, useRef } from 'react';
import { SilkeBox, SilkeText, SilkeIcon, SilkeIconDefinitions, SilkeSearchField, SilkeDivider } from '@vev/silke';
export const sentenceCase = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
export const IconTile = ({ icon, copied, onCopy }) => (
);
export const IconGroup = ({ title, icons, copied, onCopy, defaultOpen = true }) => {
const [open, setOpen] = useState(defaultOpen);
return (
setOpen(!open)}
style={{ cursor: 'pointer', userSelect: 'none' }}
>
{title}
{icons.length}
{open && (
{[...icons].sort().map((icon) => (
))}
)}
);
};
export const IconBrowser = () => {
const [search, setSearch] = useState('');
const [copied, setCopied] = useState(null);
const timeoutRef = useRef(null);
const allIcons = Object.keys(SilkeIconDefinitions);
const handleCopy = (name) => {
navigator.clipboard.writeText(name).then(() => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
setCopied(name);
timeoutRef.current = setTimeout(() => setCopied(null), 1500);
});
};
const filteredIcons = allIcons.filter((icon) =>
icon.toLowerCase().includes(search.toLowerCase())
);
const groups = {};
const ungrouped = [];
filteredIcons.forEach((name) => {
if (name.includes('.')) {
const prefix = name.split('.')[0];
if (!groups[prefix]) groups[prefix] = [];
groups[prefix].push(name);
} else {
ungrouped.push(name);
}
});
return (
{copied ? (
Copied "{copied}"
) : (
{filteredIcons.length} icons
)}
{ungrouped.length > 0 && (
)}
{Object.entries(groups)
.sort(([a], [b]) => a.localeCompare(b))
.map(([prefix, icons]) => (
))}
);
};
# Icon Browser