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

✨ Design improvements.

Browse Source
This commit is contained in:
pheralb 2023-03-19 21:36:46 +00:00
parent 71f1f4cc57
commit fc887cf0ca
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/search.svelte
View File

@ -1,13 +1,21 @@
<script lang="ts">
export let searchTerm: string;
export let placeholder: string = "Search...";
export let placeholder: string = 'Search...';
import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
</script>
<input
type="text"
placeholder={placeholder}
autocomplete="off"
class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
bind:value={searchTerm}
on:input
/>
<div class="relative w-full">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
<div class="pointer-events-none">
<MagnifyingGlass size={18} weight={searchTerm ? 'duotone' : 'regular'} />
</div>
</div>
<input
type="text"
{placeholder}
autocomplete="off"
class="w-full rounded-md border border-neutral-800 bg-neutral-700/10 p-3 pl-10 placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-neutral-700"
bind:value={searchTerm}
on:input
/>
</div>

2
src/routes/+layout.svelte
View File

@ -75,7 +75,7 @@
target="_blank"
class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
>
<Heart color="#991b1b" size={18} />
<Heart color="#991b1b" size={18} weight={'duotone'} />
<div class="flex items-center space-x-1">
<p class="text-muted text-sm">Created by pheralb</p>
<ArrowUpRight size={12} />