import React, { useState, useEffect } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import * as FiIcons from "https://esm.sh/react-icons/fi";
import * as FaIcons from "https://esm.sh/react-icons/fa";
import * as AiIcons from "https://esm.sh/react-icons/ai";
const CATEGORIES = [
"All",
"Arrows",
"Communication",
"Device",
"Document",
"Editor",
"Finance",
"Media",
"Navigation",
"User",
"Weather",
];
const ICON_SETS = {
Fi: FiIcons,
Fa: FaIcons,
Ai: AiIcons,
};
function App() {
const [searchTerm, setSearchTerm] = useState("");
const [copiedIcon, setCopiedIcon] = useState(null);
const [activeCategory, setActiveCategory] = useState("All");
const [sandbox, setSandbox] = useState([]);
const allIcons = Object.entries(ICON_SETS).flatMap(([prefix, iconSet]) =>
Object.keys(iconSet).map(iconName => ({ name: iconName, prefix }))
);
const addToSandbox = (iconName, prefix) => {
setSandbox([...sandbox, { name: iconName, prefix }]);
};
const copySandbox = () => {
const importStatements = [...new Set(sandbox.map(icon =>
`import { ${icon.name} } from 'react-icons/${icon.prefix.toLowerCase()}';`
))].join('\n');
const usageExamples = sandbox.map(icon => `<${icon.name} />`).join('\n');
const clipboardText = `${importStatements}\n\n${usageExamples}`;
navigator.clipboard.writeText(clipboardText).then(() => {
alert("Sandbox content copied to clipboard!");
});
};
const filteredIcons = allIcons.filter(icon => {
const matchesSearch = icon.name.toLowerCase().includes(searchTerm.toLowerCase());
const matchesCategory = activeCategory === "All" || icon.name.toLowerCase().includes(activeCategory.toLowerCase());
return matchesSearch && matchesCategory;
});
const renderIcon = (iconName, prefix) => {
const IconComponent = ICON_SETS[prefix][iconName];
return IconComponent ? <IconComponent size={24} /> : null;
};
return (
<div className="container">
<h1>Icon Explorer</h1>
<div className="sandbox">
<h2>Sandbox</h2>
<div className="sandbox-icons">
{sandbox.map(({ name, prefix }, index) => (
<div key={index} className="sandbox-icon">
{renderIcon(name, prefix)}
</div>
))}
</div>
<button onClick={copySandbox} className="copy-button">Copy Sandbox</button>
</div>
<input
type="text"
placeholder="Search icons..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="search-input"
/>
<div className="pillbox">
{CATEGORIES.map(category => (
<button
key={category}
className={`pill ${activeCategory === category ? 'active' : ''}`}
onClick={() => setActiveCategory(category)}
>
{category}