45 lines
1.0 KiB
Svelte
45 lines
1.0 KiB
Svelte
<!-- Component: SearchBar -->
|
|
<script lang="ts">
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
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={cn('pl-11 sm:pl-14 md:pl-14 lg:pl-14', className)}
|
|
bind:value
|
|
{placeholder}
|
|
/>
|
|
</div>
|