---
import Button from "../button.astro";

const feed = "https://feed.miantiao.me/";
---

<section class="max-w-4xl mx-auto px-7 lg:px-0">
  <h2
    class="text-2xl font-bold leading-10 tracking-tight text-neutral-900 dark:text-neutral-100"
  >
    My Writings
  </h2>
  <p class="mb-6 text-base text-neutral-600 dark:text-neutral-400">
    Along with coding I also like to write about life and technology. Here are
    some of my recent posts.
  </p>

  <div class="w-full max-w-4xl mx-auto my-7 xl:px-0">
    <div
      class="flex flex-col items-start justify-start md:flex-row md:space-x-7"
    >
      <div class="w-full md:w-2/3 space-y-7">

        <div class="flex items-center justify-center w-full py-5">
          <Button text="View All My Writing" link="/posts" />
        </div>
      </div>
      <div class="w-full mt-10 md:w-1/3 md:mt-0">
        <form
          method="get"
          action={feed}
          class="p-6 border border-dashed rounded-2xl border-neutral-300 dark:border-neutral-600"
        >
          <div class="relative flex items-center space-x-2">
            <svg
              class="flex-none w-6 h-6 text-neutral-700 dark:text-neutral-200"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              ><path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z"
              ></path></svg
            >
            <h2
              class="flex text-sm font-semibold text-neutral-900 dark:text-neutral-100"
            >
              Subscribe my blog
            </h2>
          </div>
          <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
            Get my blog updates via <a
              class="font-bold"
              href={`https://feedly.com/i/subscription/feed%2F${encodeURIComponent(feed)}`}
              >Feedly</a
            >, <a
              class="font-bold"
              href={`https://www.inoreader.com/feed/${encodeURIComponent(feed)}`}
              >Inoreader</a
            > or <a class="font-bold" href={feed}>RSS</a>.
          </p>
          <div class="flex flex-col items-center w-full mt-4 space-y-3">
            <input
              type="url"
              readonly
              placeholder="Email address"
              aria-label="Email address"
              required=""
              value={feed}
              class="w-full h-10 px-3 text-sm border border-dashed rounded-md focus:ring-0 focus:outline-black border-neutral-400 dark:border-neutral-600 dark:bg-neutral-800 dark:placeholder-neutral-400 dark:text-white"
            />
            <button
              type="submit"
              class="block w-full px-4 py-2 mt-5 text-xs font-semibold text-center duration-300 ease-out border rounded bg-neutral-900 dark:bg-neutral-100 dark:hover:border-neutral-300 dark:text-neutral-800 dark:hover:bg-neutral-950 dark:hover:text-neutral-100 text-neutral-100 border-neutral-900 hover:bg-white hover:text-neutral-900"
              >Subscribe</button
            >
          </div>
        </form>
      </div>
    </div>
  </div>
</section>