frontend-svelte/src/shared/ui/SearchBar/SearchBar.svelte

<!-- Component: SearchBar -->
<script lang="ts">
import { Input } from '$shared/shadcn/ui/input';
import AsteriskIcon from '@lucide/svelte/icons/asterisk';

interface Props {
    /**
     * Unique identifier for the input element
     */
    id?: string;
    /**
     * Current search value (bindable)
     */
    value: string;
    /**
     * Additional CSS classes for the container
     */
    class?: string;
    /**
     * Placeholder text for the input
     */
    placeholder?: string;
    /**
     * Optional label displayed above the input
     */
    label?: string;
}

let {
    id = 'search-bar',
    value = $bindable(''),
    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-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
        <AsteriskIcon class="size-4 stroke-gray-400 stroke-[1.5]" />
    </div>
    <Input
        id={id}
        placeholder={placeholder}
        bind:value={value}
        onkeydown={handleKeyDown}
        class="
            h-16 w-full 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-sm
            placeholder:tracking-wide
            pl-14 pr-6
            rounded-xl
            transition-all duration-200
            font-medium
        "
    />
</div>