chore(SearchBar): replace input with reusable one

This commit is contained in:
Ilia Mashkov
2026-02-07 18:02:32 +03:00
parent 98a94e91ed
commit c4bfb1db56

View File

@@ -1,6 +1,6 @@
<!-- Component: SearchBar -->
<script lang="ts">
import { Input } from '$shared/shadcn/ui/input';
import { Input } from '$shared/ui';
import AsteriskIcon from '@lucide/svelte/icons/asterisk';
interface Props {
@@ -32,44 +32,11 @@ let {
class: className,
placeholder,
}: Props = $props();
function handleKeyDown(event: KeyboardEvent) {
if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {
event.preventDefault();
}
}
</script>
<div class="relative w-full">
<div class="absolute left-4 sm:left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
<AsteriskIcon class="size-3 sm:size-4 stroke-gray-400 stroke-[1.5]" />
</div>
<Input
id={id}
placeholder={placeholder}
bind:value={value}
onkeydown={handleKeyDown}
class="
h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base
backdrop-blur-md bg-white/80
border border-gray-300/50
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
focus-visible:border-gray-400/60
focus-visible:outline-none
focus-visible:ring-1
focus-visible:ring-gray-400/30
focus-visible:bg-white/90
hover:bg-white/90
hover:border-gray-400/60
text-gray-900
placeholder:text-gray-400
placeholder:font-mono
placeholder:text-xs sm:placeholder:text-sm
placeholder:tracking-wide
pl-11 sm:pl-14 pr-4 sm:pr-6
rounded-xl
transition-all duration-200
font-medium
"
/>
<Input {id} class={className} bind:value={value} placeholder={placeholder} />
</div>