55 lines
1.4 KiB
Svelte
55 lines
1.4 KiB
Svelte
|
<!--
|
||
|
|
Component: Input
|
||
|
|
Provides styled input component with all the shadcn input props
|
||
|
|
-->
|
||
|
|
<script lang="ts">
|
||
|
|
import { Input } from '$shared/shadcn/ui/input';
|
||
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||
|
|
import type { ComponentProps } from 'svelte';
|
||
|
|
|
||
|
|
type Props = ComponentProps<typeof Input> & {
|
||
|
|
/**
|
||
|
|
* Current search value (bindable)
|
||
|
|
*/
|
||
|
|
value: string;
|
||
|
|
/**
|
||
|
|
* Additional CSS classes for the container
|
||
|
|
*/
|
||
|
|
class?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
let {
|
||
|
|
value = $bindable(''),
|
||
|
|
class: className,
|
||
|
|
...rest
|
||
|
|
}: Props = $props();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Input
|
||
|
|
bind:value={value}
|
||
|
|
class={cn(
|
||
|
|
'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',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...rest}
|
||
|
|
/>
|