diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 479846a..2adc392 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -12,13 +12,17 @@ import Grid from '@/components/grid.svelte'; import NotFound from '@/components/notFound.svelte'; + // Icons: + import ArrowsClockWise from 'phosphor-svelte/lib/ArrowsClockwise'; + import ArrowSquareOut from 'phosphor-svelte/lib/ArrowSquareOut'; + // Search: let searchTerm = ''; let filteredSvgs: iSVG[] = []; if (searchTerm.length === 0) { filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => { - return a.title.localeCompare(b.title); + return b.id - a.id; }); } @@ -33,6 +37,32 @@ searchTerm = ''; searchSvgs(); }; + + // Sort: + let sorted: boolean = false; + + const sort = () => { + if (sorted) { + sortByLatest(); + } else { + sortAlphabetically(); + } + sorted = !sorted; + }; + + // Sort alphabetically: + const sortAlphabetically = () => { + filteredSvgs = filteredSvgs.sort((a: iSVG, b: iSVG) => { + return a.title.localeCompare(b.title); + }); + }; + + // Sort by latest: + const sortByLatest = () => { + filteredSvgs = filteredSvgs.sort((a: iSVG, b: iSVG) => { + return b.id - a.id; + }); + }; @@ -46,6 +76,23 @@ clearSearch={() => clearSearch()} placeholder={`Search ${filteredSvgs.length} logos...`} /> +
+ + + Submit SVG + + +
{#each filteredSvgs as svg}