bibdle/src/lib/components/SearchInput.svelte

<script lang="ts">
  import { bibleBooks, type BibleBook } from "$lib/types/bible";

  let { searchQuery = $bindable(""), guessedIds, submitGuess } = $props();

  let filteredBooks = $derived(
    bibleBooks.filter((book) =>
      book.name.toLowerCase().includes(searchQuery.toLowerCase())
    )
  );

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "Enter" && filteredBooks.length > 0) {
      submitGuess(filteredBooks[0].id);
    }
  }
</script>

<div class="relative">
  <div class="relative">
    <svg
      class="absolute left-4 sm:left-6 top-1/2 transform -translate-y-1/2 w-5 h-5 sm:w-6 sm:h-6 text-gray-400"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
      />
    </svg>
    <input
      bind:value={searchQuery}
      placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
      class="w-full pl-12 sm:pl-16 p-4 sm:p-6 border-2 border-gray-500 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-600 focus:ring-4 focus:ring-blue-200 transition-all bg-white"
      onkeydown={handleKeydown}
      autocomplete="off"
    />
    {#if searchQuery}
      <button
        class="absolute right-4 sm:right-6 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
        onclick={() => (searchQuery = "")}
        aria-label="Clear search"
      >
        <svg
          class="w-5 h-5 sm:w-6 sm:h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    {/if}
  </div>
  {#if searchQuery && filteredBooks.length > 0}
    <ul
      class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-300 rounded-2xl shadow-xl"
    >
      {#each filteredBooks as book (book.id)}
        <li>
          <button
            class="w-full p-4 sm:p-5 text-left {guessedIds.has(book.id)
              ? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
              : 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
            onclick={() => submitGuess(book.id)}
          >
            <span
              class="font-semibold {guessedIds.has(book.id)
                ? 'line-through text-gray-500'
                : ''}">{book.name}</span
            >
            <span class="ml-auto text-sm opacity-75"
              >({book.testament.toUpperCase()})</span
            >
          </button>
        </li>
      {/each}
    </ul>
  {:else if searchQuery}
    <p class="mt-4 text-center text-gray-500 p-8">No books found</p>
  {/if}
</div>