blog/components/badges.tsx

import Link from "next/link";

interface BadgeProps {
  href?: string;
  children: React.ReactNode;
  style?: React.CSSProperties;
}

function Badge({ href, children, style }: BadgeProps) {
  const base = (
    <div
      className="flex items-center justify-center border border-white/40 text-center font-mono leading-tight select-none"
      style={{ width: 88, height: 31, fontSize: 9, ...style }}
    >
      {children}
    </div>
  );

  if (href) {
    if (href.startsWith("http")) {
      return (
        <a href={href} target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity">
          {base}
        </a>
      );
    }
    return (
      <Link href={href} className="hover:opacity-80 transition-opacity">
        {base}
      </Link>
    );
  }
  return base;
}

export default function Badges() {
  return (
    <div className="flex flex-wrap gap-1.5">
      <Badge
        href="https://nextjs.org"
        style={{ background: "linear-gradient(135deg, #0d0d0d, #1a1a2e)", color: "#7dd3fc", borderColor: "#334155" }}
      >
        <span>⬛ Next.js</span>
      </Badge>

      <Badge
        href="https://bun.sh"
        style={{ background: "linear-gradient(135deg, #1a0a00, #2d1500)", color: "#fb923c", borderColor: "#7c2d12" }}
      >
        🍞 Powered by Bun
      </Badge>

      <Badge
        style={{ background: "linear-gradient(135deg, #0c1a3a, #1e3a6e)", color: "#93c5fd", borderColor: "#1e40af" }}
      >
        <div>
          <div>Best viewed</div>
          <div>1024×768</div>
        </div>
      </Badge>

      <Badge
        href="/feed.xml"
        style={{ background: "linear-gradient(135deg, #431407, #7c2d12)", color: "#fde68a", borderColor: "#b45309" }}
      >
        📡 Valid RSS
      </Badge>

      <Badge
        style={{ background: "linear-gradient(135deg, #0f172a, #1e1b4b)", color: "#c4b5fd", borderColor: "#4c1d95" }}
      >
        Made with ♥
      </Badge>

      <Badge
        style={{ background: "linear-gradient(135deg, #0369a1, #0ea5e9)", color: "white", borderColor: "#38bdf8" }}
      >
        <div>
          <div style={{ fontSize: 8 }}>✦ Frutiger</div>
          <div style={{ fontSize: 8 }}>Aero ✦</div>
        </div>
      </Badge>
    </div>
  );
}