28 lines
797 B
Svelte
28 lines
797 B
Svelte
<!--
|
|
Component: SearchInput
|
|
Convenience wrapper around Input that pre-fills the leftIcon slot with
|
|
a Search icon sized to match the current `size` prop.
|
|
|
|
The consumer can still override rightIcon, add a clear button, etc.
|
|
They cannot pass leftIcon — it's owned by this wrapper.
|
|
-->
|
|
<script lang="ts">
|
|
import { Input } from '$shared/ui/Input';
|
|
import { inputIconSize } from '$shared/ui/Input/types';
|
|
import SearchIcon from '@lucide/svelte/icons/search';
|
|
import type { ComponentProps } from 'svelte';
|
|
|
|
type Props = Exclude<ComponentProps<typeof Input>, 'leftIcon'>;
|
|
|
|
let {
|
|
value = $bindable(''),
|
|
...rest
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<Input bind:value {...rest}>
|
|
{#snippet leftIcon(size)}
|
|
<SearchIcon size={inputIconSize[size]} />
|
|
{/snippet}
|
|
</Input>
|