qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨 Update layout styles and add clear search button

Browse Source
This commit is contained in:
pheralb
2024-08-22 23:32:34 +01:00
parent 91b2ac31ec
commit 2d6641abdb
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+15 -3
View File
@@ -18,7 +18,7 @@
const searchParam = queryParam('search');
// Icons:
import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon, TrashIcon } from 'lucide-svelte';
import { buttonStyles } from '@/ui/styles';
let sorted: boolean = false;
@@ -104,10 +104,22 @@
/>
<Container>
<div class="flex items-center justify-end mb-4">
<div class={cn('flex items-center mb-4 justify-end', searchTerm.length > 0 && 'justify-between')}>
{#if searchTerm.length > 0}
<button
class={cn(
'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
filteredSvgs.length === 0 && 'hidden'
)}
on:click={() => clearSearch()}
>
<TrashIcon size={16} strokeWidth={2} class="mr-1" />
<span>Clear results</span>
</button>
{/if}
<button
class={cn(
'flex items-center justify-center space-x-1 rounded-md px-3 py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
'flex items-center justify-center space-x-1 rounded-md py-1.5 text-sm font-medium opacity-80 hover:opacity-100 transition-opacity',
filteredSvgs.length === 0 && 'hidden'
)}
on:click={() => sort()}