zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(icons): add categoryIcon support for representative category icons

Browse Source 
- add optional `categoryIcon` flag to icon metadata helper in add-remove.js and business.js
- mark Add01Icon and ChartLineData01Icon as category representative icons
- use categoryIcon flag in IconsPage to display the most representative icon per category
- add `cursor-pointer` to category sidebar buttons and widen sidebar from 200px to 250px
This commit is contained in:
Hyko
2026-04-26 11:04:19 -04:00
parent f4070f6611
commit d170058509
3 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/devkit/IconsPage.client.js
+6 -4
View File
@@ -18,7 +18,9 @@ export default function IconsPage() {
const cat = Icon.category;
if (!cat) continue;
if (!map.has(cat)) map.set(cat, { count: 0, FirstIcon: Icon });
map.get(cat).count += 1;
const entry = map.get(cat);
entry.count += 1;
if (Icon.categoryIcon) entry.FirstIcon = Icon;
}
return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b));
}, []);
@@ -103,14 +105,14 @@ export default function IconsPage() {
</div>
{hasSidebar && (
<div className="w-full sm:w-[200px] sm:shrink-0 sm:sticky sm:top-4 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden order-first sm:order-none">
<div className="w-full sm:w-[250px] sm:shrink-0 sm:sticky sm:top-4 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden order-first sm:order-none">
<div className="px-3 py-2.5 border-b border-neutral-200 dark:border-neutral-800">
<span className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wide">Catégories</span>
</div>
<div className="py-1 flex sm:flex-col flex-row flex-wrap sm:flex-nowrap gap-0">
<button
onClick={() => setSelectedCategory(null)}
className={`flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
className={`cursor-pointer flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
selectedCategory === null
? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white'
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white'
@@ -125,7 +127,7 @@ export default function IconsPage() {
<button
key={cat}
onClick={() => setSelectedCategory(cat)}
className={`flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
className={`cursor-pointer flex items-center justify-between px-3 py-1.5 text-sm rounded-md m-1 sm:mx-1 sm:my-0 sm:w-[calc(100%-8px)] transition-colors ${
selectedCategory === cat
? 'bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white'
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white'