`apps/web/app/community/page.tsx`

87 lines
export const metadata = {
  title: "Community",
  description:
    "Where 90210 fans gather — Reddit, Discord discovery, and the 9021OMG rewatch podcast. Links out to independent fan communities.",
};

type Link = { name: string; desc: string; href: string; icon: string; verified: string };

const REDDIT: Link[] = [
  {
    name: "r/90210",
    desc: "The main 90210 subreddit — episode talk, cast news, and rewatch threads for the CW-era series and the wider franchise.",
    href: "https://www.reddit.com/r/90210/",
    icon: "👽",
    verified: "active subreddit",
  },
  {
    name: "Search all 90210 subreddits",
    desc: "Reddit's own search for every 90210 community, including original-series and franchise subs.",
    href: "https://www.reddit.com/search/?q=90210&type=sr",
    icon: "🔎",
    verified: "live search",
  },
];

const DISCORD: Link[] = [
  {
    name: "Browse 90210 Discord servers",
    desc: "There's no single official 90210 server, so this is an honest search of public listings — fan servers come and go, so we point you to discovery rather than a link that expires.",
    href: "https://disboard.org/search?keyword=90210",
    icon: "💬",
    verified: "server directory",
  },
];

const PODCASTS: Link[] = [
  {
    name: "9021OMG",
    desc: "The official rewatch podcast — original stars Jennie Garth (Kelly) and Tori Spelling (Donna) revisit the series episode by episode.",
    href: "https://www.google.com/search?q=9021OMG+podcast",
    icon: "🎙️",
    verified: "fan podcast",
  },
];

function Group({ title, links }: { title: string; links: Link[] }) {
  return (
    <>
      <h2>{title}</h2>
      <div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))" }}>
        {links.map((l) => (
          <a
            key={l.href}
            className="card"
            href={l.href}
            target="_blank"
            rel="noopener noreferrer"
            style={{ display: "flex", flexDirection: "column", gap: 6, color: "inherit" }}
          >
            <div style={{ fontSize: 26 }}>{l.icon}</div>
            <strong style={{ fontFamily: "var(--font-display)", fontSize: 16 }}>
              {l.name} ↗
            </strong>
            <span style={{ color: "var(--muted)", fontSize: 12.5, flex: 1 }}>{l.desc}</span>
            <span className="pill" style={{ alignSelf: "flex-start" }}>{l.verified}</span>
          </a>
        ))}
      </div>
    </>
  );
}

export default function Community() {
  return (
    <section>
      <h1>Community</h1>
      <p style={{ color: "var(--muted)", fontSize: 13 }}>
        Where 90210 fans actually hang out. These are independent, fan-run
        communities — we link out, we don't host or moderate them.
      </p>
      <Group title="Reddit" links={REDDIT} />
      <Group title="Discord" links={DISCORD} />
      <Group title="Rewatch podcast" links={PODCASTS} />
    </section>
  );
}