src/lib/components/Prompt.svelte

<script lang="ts">
  export let value: string;
  export let placeholder: string = "Ask me anything...";
  export let label: string | undefined = "Prompt";
  export let onChange: (v: string) => void
</script>

<div class="flex flex-col gap-2.5">
  <label
    for="prompt"
    class="font-sans text-slate-400 font-regular text-sm"
  >
    {label ?? 'Prompt'}:
  </label>
  <textarea
    id="prompt"
    {value}
    {placeholder}
    class="shadow-inner font-code border border-slate-800 bg-slate-900/60 focus:bg-slate-900/90 focus:border-slate-700/80 text-white rounded-lg text-sm p-4 w-full transition-all duration-200 h-44 resize-none leading-relaxed outline-none"
    on:input={(e) => {
      const target = e.target
      // @ts-ignore
      onChange(target.value)
    }}
  />
</div>