mirror of
https://github.com/pheralb/svgl.git
synced 2024-11-13 08:46:56 +08:00
✨ Design improvements.
This commit is contained in:
parent
71f1f4cc57
commit
fc887cf0ca
@ -1,13 +1,21 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let searchTerm: string;
|
export let searchTerm: string;
|
||||||
export let placeholder: string = "Search...";
|
export let placeholder: string = 'Search...';
|
||||||
|
import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input
|
<div class="relative w-full">
|
||||||
type="text"
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
|
||||||
placeholder={placeholder}
|
<div class="pointer-events-none">
|
||||||
autocomplete="off"
|
<MagnifyingGlass size={18} weight={searchTerm ? 'duotone' : 'regular'} />
|
||||||
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"
|
</div>
|
||||||
bind:value={searchTerm}
|
</div>
|
||||||
on:input
|
<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>
|
||||||
|
@ -75,7 +75,7 @@
|
|||||||
target="_blank"
|
target="_blank"
|
||||||
class="mt-5 flex items-center space-x-2 text-neutral-400 transition-all duration-100 hover:text-white"
|
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">
|
<div class="flex items-center space-x-1">
|
||||||
<p class="text-muted text-sm">Created by pheralb</p>
|
<p class="text-muted text-sm">Created by pheralb</p>
|
||||||
<ArrowUpRight size={12} />
|
<ArrowUpRight size={12} />
|
||||||
|
Loading…
Reference in New Issue
Block a user