---
import PageLayout from "~/layouts/PageLayout.astro";

const commonSearches = [
  "Drupal",
  "Test-Driven Development",
  "Tailwind CSS",
  "Ansible",
  "Ansistrano",
];
---

<PageLayout title="Search">
  <div>
    <form
      class="flex items-center space-x-6"
      action="https://www.google.com/search"
      method="get"
    >
      <div class="flex-1">
        <input
          type="hidden"
          name="q"
          value="site:https://www.oliverdavies.uk"
        />
        <input class="w-full" type="text" name="q" alt="search" />
      </div>

      <div>
        <input class="cursor-pointer button" type="submit" value="Search" />
      </div>
    </form>
  </div>

  <aside>
    <h2>Common searches</h2>

    <ul>
      {
        commonSearches.map((search) => (
          <li>
            <a
              href={`https://www.google.com/search?q=site%3Awww.oliverdavies.uk+%22${search}%22`}
            >
              {search}
            </a>
          </li>
        ))
      }
    </ul>
  </aside>
</PageLayout>