Design improvements.

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

View File

@ -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>

View File

@ -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} />