---
import PageLayout from "@/layouts/Base.astro";
import { RSS_FEEDS } from "@/data/constants";

const meta = {
	title: "/feeds",
	description: "RSS feeds available on this site",
};
---
<PageLayout meta={meta}>
  <div class="space-y-6">
    <h1 class="title">/feeds</h1>
    <p>RSS feeds available on this site and some of my other apps. Drop any of these into your reader of choice.</p>
    <ul class="list-none pl-0 grid grid-cols-1 sm:grid-cols-2 gap-4">
      {RSS_FEEDS.map((feed) => {
        const absHref = feed.href.startsWith("http")
          ? feed.href
          : `https://stevedylan.dev${feed.href}`;
        return (
          <li class="group relative flex flex-col gap-2 border border-zinc-700 hover:border-zinc-500 rounded-md p-4 transition-colors">
            <div class="flex items-center gap-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 256 256"
                class="shrink-0 text-accent-2"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  d="M106.91 149.09A71.53 71.53 0 0 1 128 200a8 8 0 0 1-16 0a56 56 0 0 0-56-56a8 8 0 0 1 0-16a71.53 71.53 0 0 1 50.91 21.09M56 80a8 8 0 0 0 0 16a104 104 0 0 1 104 104a8 8 0 0 0 16 0A120 120 0 0 0 56 80m118.79 1.21A166.9 166.9 0 0 0 56 32a8 8 0 0 0 0 16a151 151 0 0 1 107.48 44.52A151 151 0 0 1 208 200a8 8 0 0 0 16 0a166.9 166.9 0 0 0-49.21-118.79M60 184a12 12 0 1 0 12 12a12 12 0 0 0-12-12"
                />
              </svg>
              <p class="font-bold m-0">{feed.name}</p>
            </div>
            {feed.description && (
              <p class="m-0 text-zinc-400">{feed.description}</p>
            )}
            <div class="flex items-center gap-2 mt-auto pt-2">
              <a
                href={feed.href}
                target="_blank"
                rel="noreferrer"
                class="style-link truncate text-xs"
              >
                {feed.href}
              </a>
            </div>
          </li>
        );
      })}
    </ul>
    <p>If you're looking for the list of blogs I follow, check out <a class="style-link" href="/blogroll">/blogroll</a></p>
  </div>
</PageLayout>