src/lib/components/fields/Input.svelte

<script lang="ts">
  export let placeholder: string = "Search";
  export let value: string = "";
  export let prefix: string = "";
  export let onChange: (value: string) => void = () => {};

  const handleChange = (event: any) => {
    const target = event.target as HTMLInputElement;
    onChange(target.value as string);
  }
</script>

<div class="bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-200 text-base flex items-center justify-start overflow-hidden">
  {#if prefix}
    <div class="flex items-center justify-between bg-neutral-800/50 px-3 border-r border-neutral-800 py-4">
      <p class="text-xs uppercase text-neutral-100 font-semibold">{prefix}</p>
    </div>
  {/if}
  <input
    type="text"
    {value}
    {placeholder}
    class="bg-transparent outline-none border-none placeholder:text-neutral-500 w-full px-4 py-3"
    on:input={handleChange}
  >
</div>