LinkGrid.astro

---
interface LinkItem {
  name: string;
  link: string;
  sublink?: string;
  subtext?: string;
  img: string;
  not_encouraged?: boolean;
}

interface Props {
  items: LinkItem[];
}

const { items } = Astro.props;

---

<ul class="mb-10 grid w-full grid-cols-1 gap-4 overflow-auto p-0 sm:mb-20 sm:gap-8 lg:grid-cols-2 xl:grid-cols-3">
  {
    items.map((item) => {
      const hasSubLink = !!item.sublink;
      const Container = (hasSubLink ? "div" : "a") as any;
      const PossibleLink = (!hasSubLink ? "div" : "a") as any;

      return (
        <li class="flex list-none" title={item.not_encouraged ? "Not encouraged" : ""}>
          <Container
            class={`flex flex-1 items-center gap-4 rounded-lg border-4 p-4 border-bg-primary dark:border-bg-primary-dark ${
              item.not_encouraged ? "border-gradient-warning" : "border-gradient-secondary"
            }`}
            href={!hasSubLink && item.link}
          >
            <PossibleLink
              href={hasSubLink && item.link}
              class="aspect-square h-10 w-10 border-none transition-all xs:h-16 xs:w-16 sm:h-20 sm:w-20 md:h-24 md:w-24"
            >
              <img
                loading="lazy"
                src={item.img}
                alt={`${item.name} Logo`}
                class="aspect-square h-auto w-full object-contain"
              />
            </PossibleLink>
            <div class="flex w-fit flex-col justify-center">
              <PossibleLink
                href={hasSubLink && item.link}
                class="border-none text-base font-medium motion-safe:transition-all xs:text-lg sm:break-normal sm:text-xl"
              >
                {item.name}
              </PossibleLink>
              {item.sublink && item.subtext && (
                <a
                  href={item.sublink}
                  class="w-fit text-primary-contrast text-opacity-80 dark:text-primary-dark-contrast dark:text-opacity-80"
                >
                  {/* In the built output Astro does not preserve the whitespace, hence this workaround */}
                  {item.subtext.split("\n").map((line) => <span class="block">{line}</span>)}
                </a>
              )}
              {!item.sublink && item.subtext && (
                <p class="block w-fit text-primary-contrast text-opacity-80 dark:text-primary-dark-contrast dark:text-opacity-80">
                  {/* In the built output Astro does not preserve the whitespace, hence this workaround */}
                  {item.subtext.split("\n").map((line) => <span class="block">{line}</span>)}
                </p>
              )}
            </div>
          </Container>
        </li>
      );
    })
  }
</ul>