Search Form

<section class="ws-forms bg-[var(--ws-forms-bg)] py-20">
  <div class="mx-auto max-w-4xl px-6">
    <h2 class="text-2xl font-bold tracking-tight text-[var(--ws-forms-text)]">Search</h2>
    <p class="mt-2 text-sm text-[var(--ws-forms-label)]">Find what you're looking for with filters to narrow your results.</p>

    <form class="mt-8">
      <!-- Search input -->
      <div class="relative">
        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
          <svg class="h-5 w-5 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
          </svg>
        </div>
        <input type="search" id="sr-query" name="query" placeholder="Search articles, products, topics..."
          class="block w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] py-3.5 pl-12 pr-4 text-base text-[var(--ws-forms-text)] placeholder:text-[var(--ws-forms-label)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]"/>
      </div>

      <!-- Filter dropdowns -->
      <fieldset class="mt-6">
        <legend class="text-sm font-medium text-[var(--ws-forms-text)]">Filters</legend>
        <div class="mt-3 grid gap-4 sm:grid-cols-3">
          <div>
            <label for="sr-category" class="block text-sm font-medium text-[var(--ws-forms-label)]">Category</label>
            <div class="relative mt-1.5">
              <select id="sr-category" name="category"
                class="block w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] py-2.5 pl-4 pr-10 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
                <option value="">All categories</option>
                <option value="articles">Articles</option>
                <option value="tutorials">Tutorials</option>
                <option value="guides">Guides</option>
                <option value="videos">Videos</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                <svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
              </div>
            </div>
          </div>
          <div>
            <label for="sr-date" class="block text-sm font-medium text-[var(--ws-forms-label)]">Date range</label>
            <div class="relative mt-1.5">
              <select id="sr-date" name="date_range"
                class="block w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] py-2.5 pl-4 pr-10 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
                <option value="">Any time</option>
                <option value="24h">Past 24 hours</option>
                <option value="7d">Past week</option>
                <option value="30d">Past month</option>
                <option value="365d">Past year</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                <svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
              </div>
            </div>
          </div>
          <div>
            <label for="sr-sort" class="block text-sm font-medium text-[var(--ws-forms-label)]">Sort by</label>
            <div class="relative mt-1.5">
              <select id="sr-sort" name="sort"
                class="block w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] py-2.5 pl-4 pr-10 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
                <option value="relevance">Relevance</option>
                <option value="newest">Newest first</option>
                <option value="oldest">Oldest first</option>
                <option value="popular">Most popular</option>
              </select>
              <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                <svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
              </div>
            </div>
          </div>
        </div>
      </fieldset>

      <!-- Action buttons -->
      <div class="mt-6 flex items-center justify-end gap-3">
        <button type="reset"
          class="rounded-xl border border-[var(--ws-forms-input-border)] px-5 py-2.5 text-sm font-medium text-[var(--ws-forms-text)] transition hover:bg-black/5">
          Clear filters
        </button>
        <button type="submit"
          class="inline-flex items-center gap-2 rounded-xl bg-[var(--ws-forms-action-bg)] px-6 py-2.5 text-sm font-semibold text-[var(--ws-forms-action-text)] transition hover:brightness-110">
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
          </svg>
          Search
        </button>
      </div>
    </form>
  </div>
</section>