Footer

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

type FooterLink = {
  label: string;
  href: string;
};

type Props = {
  links?: FooterLink[];
  class?: string;
};

const { links = [], class: className } = Astro.props;
---

<footer class:list={["flex flex-col gap-6 border-t border-foreground py-8", className]}>
  <div class="flex flex-wrap items-end justify-between gap-6">
    <div class="flex items-end gap-3">
      <Glider class="size-8" />
      <span class="ph-headline text-3xl">Purdue Hackers</span>
    </div>
    {
      links.length > 0 && (
        <nav class="flex flex-wrap gap-x-5 gap-y-2 font-mono text-[13px] uppercase">
          {links.map((l) => (
            <Link href={l.href}>{l.label}</Link>
          ))}
        </nav>
      )
    }
  </div>
  <div class="text-[13px] leading-[1.5]"><slot /></div>
</footer>

import type { ReactNode } from "react";
import { cn } from "./cn";
import { Glider } from "./glider";
import { Link } from "./link";

type FooterProps = {
  links?: { label: string; href: string }[];
  children?: ReactNode;
  className?: string;
};

export function Footer({ links = [], children, className }: FooterProps) {
  return (
    <footer className={cn("flex flex-col gap-6 border-t border-foreground py-8", className)}>
      <div className="flex flex-wrap items-end justify-between gap-6">
        <div className="flex items-end gap-3">
          <Glider className="size-8" />
          <span className="ph-headline text-3xl">Purdue Hackers</span>
        </div>
        {links.length > 0 && (
          <nav className="flex flex-wrap gap-x-5 gap-y-2 font-mono text-[13px] uppercase">
            {links.map((l) => (
              <Link key={l.href} href={l.href}>
                {l.label}
              </Link>
            ))}
          </nav>
        )}
      </div>
      {children && <div className="text-[13px] leading-[1.5]">{children}</div>}
    </footer>
  );
}

export const cn = (...parts: (string | false | null | undefined)[]) => parts.filter(Boolean).join(" ");