QuickStart.astro

---
import Link from "./Link.astro";
---

<section
  x-cloak
  x-show="quickStart"
  class="mb-6 rounded border-1.5 border-orange px-3.5 py-2 md:mb-8 md:px-5 md:py-3 lg:mb-10 lg:px-6 lg:py-4"
>
  <div class="flex items-center justify-between gap-4 md:gap-6 lg:gap-8">
    <p class="content text-dark dark:text-white md:text-lg lg:text-xl">
      We recommend starting with the
      <Link href="/start">Nix quick start</Link> and consulting concept docs primarily
      for clarification. Feel free to click
      <strong class="text-orange">x</strong> to the right to disable this notification
      on <em>all</em> concept docs.
    </p>

    <button @click="quickStart = false">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="h-4 w-4 stroke-2 text-orange hover:text-gray dark:text-orange dark:hover:text-primary md:h-5 md:w-5 lg:h-6 lg:w-6"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</section>