qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-11-10 14:46:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add category count script & ui style

Browse Source
This commit is contained in:
ridemountainpig 2024-04-28 22:08:41 +08:00
parent 32057c0b08
commit e4b93afb8b
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/routes/+layout.svelte
View File

@ -5,6 +5,7 @@
// Global styles: // Global styles:
import '../app.css'; import '../app.css';
import { ModeWatcher, mode } from 'mode-watcher'; import { ModeWatcher, mode } from 'mode-watcher';
import { sidebarCategoryCountStyles } from '@/ui/styles';
// Get categories: // Get categories:
import { svgs } from '@/data/svgs'; import { svgs } from '@/data/svgs';
@ -12,6 +13,12 @@
.flatMap((svg) => (Array.isArray(svg.category) ? svg.category : [svg.category])) .flatMap((svg) => (Array.isArray(svg.category) ? svg.category : [svg.category]))
.filter((category, index, array) => array.indexOf(category) === index); .filter((category, index, array) => array.indexOf(category) === index);
// Get category counts:
let categoryCounts:any = {};
categories.forEach((category) => {
categoryCounts[category] = svgs.filter((svg) => svg.category.includes(category)).length;
});
// Toaster: // Toaster:
import { Toaster } from 'svelte-sonner'; import { Toaster } from 'svelte-sonner';
@ -37,7 +44,7 @@
'border-r border-neutral-200 dark:border-neutral-800' 'border-r border-neutral-200 dark:border-neutral-800'
)} )}
> >
<div class="md:px-6 md:py-6"> <div class="md:px-3 md:py-6">
<nav <nav
class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0" class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-5 md:px-0 pb-2 pt-3 md:pt-0"
> >
@ -63,6 +70,7 @@
)} )}
> >
<span>{category}</span> <span>{category}</span>
<span class={`hidden md:block ${sidebarCategoryCountStyles}`}>{categoryCounts[category]}</span>
</a> </a>
{/each} {/each}
</nav> </nav>

3
src/ui/styles.ts
View File

@ -9,3 +9,6 @@ export const badgeStyles =
export const sidebarItemStyles = export const sidebarItemStyles =
'flex w-full items-center space-x-3 justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40'; 'flex w-full items-center space-x-3 justify-between rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40';
export const sidebarCategoryCountStyles =
'px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-800 text-neutral-600 dark:text-neutral-400 text-xs font-mono';