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

<!-- Component: SearchBar -->
<script lang="ts">
import { Input } from '$shared/ui';
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;
}

let {
    id = 'search-bar',
    value = $bindable(''),
    class: className,
    placeholder,
}: Props = $props();
</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} class={className} bind:value={value} placeholder={placeholder} />
</div>