initial commit: rocket.new export of broadcastbeat
This commit is contained in:
Ryan Salazar
596
src/app/newsletter/archive/page.tsx
Normal file
596
src/app/newsletter/archive/page.tsx
Normal file
@@ -0,0 +1,596 @@
|
||||
"use client";
|
||||
import React, { useState, useEffect, useCallback, useId } from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
|
||||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||||
interface ArticleBlock {
|
||||
title?: string;
|
||||
excerpt?: string;
|
||||
url?: string;
|
||||
category?: string;
|
||||
featured?: boolean;
|
||||
}
|
||||
|
||||
interface Newsletter {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
layout: string;
|
||||
subject_prefix?: string;
|
||||
header_text?: string;
|
||||
accent_color?: string;
|
||||
article_blocks: ArticleBlock[];
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
// ─── Topic options ─────────────────────────────────────────────────────────────
|
||||
const TOPICS = [
|
||||
"All Topics",
|
||||
"Broadcast",
|
||||
"Live Production",
|
||||
"Post Production",
|
||||
"AI & Automation",
|
||||
"Products",
|
||||
"Technology",
|
||||
"Events",
|
||||
"Industry News",
|
||||
"NAB Show",
|
||||
"IBC",
|
||||
];
|
||||
|
||||
const CATEGORIES = [
|
||||
"Broadcast",
|
||||
"Post Production",
|
||||
"Animation",
|
||||
"AI & Automation",
|
||||
"Live Production",
|
||||
"NAB Show",
|
||||
];
|
||||
|
||||
// ─── Newsletter Card ───────────────────────────────────────────────────────────
|
||||
function NewsletterCard({ newsletter }: { newsletter: Newsletter }) {
|
||||
const date = new Date(newsletter.created_at);
|
||||
const formattedDate = date.toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
const blocks = Array.isArray(newsletter.article_blocks)
|
||||
? newsletter.article_blocks.filter((b) => b.title)
|
||||
: [];
|
||||
const accent = newsletter.accent_color || "#3b82f6";
|
||||
|
||||
const layoutLabel: Record<string, string> = {
|
||||
featured: "Weekly Digest",
|
||||
minimal: "Breaking News",
|
||||
"two-column": "Product Spotlight",
|
||||
standard: "Industry Report",
|
||||
};
|
||||
|
||||
return (
|
||||
<article className="bg-[#111] border border-[#222] hover:border-[#333] transition-colors rounded-sm overflow-hidden">
|
||||
{/* Accent bar */}
|
||||
<div className="h-0.5 w-full" style={{ backgroundColor: accent }} />
|
||||
<div className="p-5">
|
||||
{/* Meta */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span
|
||||
className="font-body text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-sm"
|
||||
style={{ color: accent, backgroundColor: `${accent}18` }}>
|
||||
{layoutLabel[newsletter.layout] || newsletter.layout}
|
||||
</span>
|
||||
<span className="text-[#444] text-[10px]">·</span>
|
||||
<time className="text-[#555] font-body text-[11px]" dateTime={newsletter.created_at}>
|
||||
{formattedDate}
|
||||
</time>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="font-heading text-[#e0e0e0] text-base font-bold leading-snug mb-2">
|
||||
{newsletter.subject_prefix ? (
|
||||
<span className="text-[#777] font-normal">{newsletter.subject_prefix} </span>
|
||||
) : null}
|
||||
{newsletter.name}
|
||||
</h2>
|
||||
|
||||
{/* Description */}
|
||||
{newsletter.header_text && (
|
||||
<p className="font-body text-[#777] text-sm leading-relaxed mb-4 line-clamp-2">
|
||||
{newsletter.header_text}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Article blocks preview */}
|
||||
{blocks.length > 0 && (
|
||||
<ul className="space-y-1.5 mb-4">
|
||||
{blocks.slice(0, 3).map((block, i) => (
|
||||
<li key={i} className="flex items-start gap-2">
|
||||
<span className="mt-1.5 w-1 h-1 rounded-full bg-[#444] flex-shrink-0" />
|
||||
<span className="font-body text-[#888] text-xs leading-relaxed line-clamp-1">
|
||||
{block.category && (
|
||||
<span className="text-[#3b82f6] font-bold mr-1">{block.category}:</span>
|
||||
)}
|
||||
{block.title}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
{blocks.length > 3 && (
|
||||
<li className="font-body text-[#555] text-xs pl-3">
|
||||
+{blocks.length - 3} more stories
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between pt-3 border-t border-[#1a1a1a]">
|
||||
<span className="font-body text-[#555] text-xs">
|
||||
{blocks.length} {blocks.length === 1 ? "story" : "stories"}
|
||||
</span>
|
||||
<span className="font-body text-[#3b82f6] text-xs font-medium">
|
||||
Issue #{newsletter.id.slice(0, 6).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Signup CTA ────────────────────────────────────────────────────────────────
|
||||
function SignupCTA() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [selected, setSelected] = useState<string[]>(["Broadcast"]);
|
||||
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
|
||||
const [message, setMessage] = useState("");
|
||||
const formId = useId();
|
||||
|
||||
const toggleCategory = (cat: string) => {
|
||||
setSelected((prev) =>
|
||||
prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]
|
||||
);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
setStatus("error");
|
||||
setMessage("Please enter a valid email address.");
|
||||
return;
|
||||
}
|
||||
setStatus("loading");
|
||||
setMessage("");
|
||||
try {
|
||||
const res = await fetch("/api/newsletter/subscribe", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email, topics: selected }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || "Failed to subscribe");
|
||||
setStatus("success");
|
||||
} catch (err: unknown) {
|
||||
setStatus("error");
|
||||
setMessage(err instanceof Error ? err.message : "Something went wrong. Please try again.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
className="bg-[#0d1520] border border-[#1e3a5f] rounded-sm p-6 md:p-8"
|
||||
aria-labelledby={`${formId}-heading`}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="flex-1 h-px bg-[#1e3a5f]" />
|
||||
<span className="section-label" id={`${formId}-heading`}>Subscribe</span>
|
||||
<div className="flex-1 h-px bg-[#1e3a5f]" />
|
||||
</div>
|
||||
<h3 className="font-heading text-[#e0e0e0] text-xl font-bold text-center mb-1">
|
||||
Never Miss an Issue
|
||||
</h3>
|
||||
<p className="font-body text-[#777] text-sm text-center mb-6">
|
||||
Get the latest broadcast industry news delivered to your inbox.
|
||||
</p>
|
||||
|
||||
{status === "success" ? (
|
||||
<div className="text-center py-4" role="status" aria-live="polite">
|
||||
<div className="w-10 h-10 rounded-full bg-[#3b82f6]/20 flex items-center justify-center mx-auto mb-3">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
|
||||
<path d="M4 10l4 4 8-8" stroke="#3b82f6" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="font-heading text-[#e0e0e0] font-bold mb-1">You're subscribed!</p>
|
||||
<p className="font-body text-[#777] text-sm">Check your inbox for a confirmation email.</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} noValidate>
|
||||
{/* Topic chips */}
|
||||
<fieldset className="mb-5">
|
||||
<legend className="font-body text-xs font-bold text-[#888] uppercase tracking-wider mb-3 block text-center">
|
||||
Topics you care about
|
||||
</legend>
|
||||
<div className="flex flex-wrap justify-center gap-2">
|
||||
{CATEGORIES.map((cat) => {
|
||||
const checked = selected.includes(cat);
|
||||
return (
|
||||
<label
|
||||
key={cat}
|
||||
className={`newsletter-chip ${checked ? "newsletter-chip-active" : ""}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => toggleCategory(cat)}
|
||||
className="sr-only"
|
||||
aria-label={`Subscribe to ${cat} news`}
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`mr-1.5 inline-block w-3 h-3 rounded-sm border transition-colors ${checked ? "bg-[#3b82f6] border-[#3b82f6]" : "border-[#444]"}`}>
|
||||
{checked && (
|
||||
<svg viewBox="0 0 12 12" fill="none" className="w-full h-full" aria-hidden="true">
|
||||
<path d="M2 6l3 3 5-5" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)}
|
||||
</span>
|
||||
{cat}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{/* Email + button */}
|
||||
<div className="flex flex-col sm:flex-row gap-2 max-w-md mx-auto">
|
||||
<div className="flex-1">
|
||||
<label htmlFor={`${formId}-email`} className="sr-only">Email address</label>
|
||||
<input
|
||||
id={`${formId}-email`}
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => { setEmail(e.target.value); setMessage(""); setStatus("idle"); }}
|
||||
placeholder="Enter your email address"
|
||||
autoComplete="email"
|
||||
aria-required="true"
|
||||
aria-invalid={status === "error"}
|
||||
disabled={status === "loading"}
|
||||
className={`search-input w-full py-2.5 px-4 text-sm ${status === "error" ? "border-red-500" : ""} ${status === "loading" ? "opacity-60 cursor-not-allowed" : ""}`}
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === "loading"}
|
||||
className={`btn-subscribe py-2.5 px-6 text-sm whitespace-nowrap focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${status === "loading" ? "opacity-70 cursor-not-allowed" : ""}`}>
|
||||
{status === "loading" ? "Subscribing..." : "Subscribe Free"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{status === "error" && message && (
|
||||
<p className="font-body text-red-400 text-xs mt-2 text-center" role="alert">
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p className="font-body text-[#555] text-xs mt-3 text-center">
|
||||
No spam. Unsubscribe anytime.{" "}
|
||||
<Link href="/privacy" className="text-[#3b82f6] hover:underline">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
</p>
|
||||
</form>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Main Page ─────────────────────────────────────────────────────────────────
|
||||
export default function NewsletterArchivePage() {
|
||||
const [newsletters, setNewsletters] = useState<Newsletter[]>([]);
|
||||
const [years, setYears] = useState<number[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
// Filters
|
||||
const [selectedTopic, setSelectedTopic] = useState("All Topics");
|
||||
const [selectedYear, setSelectedYear] = useState("");
|
||||
const [selectedMonth, setSelectedMonth] = useState("");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const MONTHS = [
|
||||
{ value: "", label: "All Months" },
|
||||
{ value: "1", label: "January" },
|
||||
{ value: "2", label: "February" },
|
||||
{ value: "3", label: "March" },
|
||||
{ value: "4", label: "April" },
|
||||
{ value: "5", label: "May" },
|
||||
{ value: "6", label: "June" },
|
||||
{ value: "7", label: "July" },
|
||||
{ value: "8", label: "August" },
|
||||
{ value: "9", label: "September" },
|
||||
{ value: "10", label: "October" },
|
||||
{ value: "11", label: "November" },
|
||||
{ value: "12", label: "December" },
|
||||
];
|
||||
|
||||
const fetchArchive = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (selectedTopic && selectedTopic !== "All Topics") params.set("topic", selectedTopic);
|
||||
if (selectedYear) params.set("year", selectedYear);
|
||||
if (selectedYear && selectedMonth) params.set("month", selectedMonth);
|
||||
|
||||
const res = await fetch(`/api/newsletter/archive?${params.toString()}`);
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || "Failed to load archive");
|
||||
setNewsletters(data.newsletters || []);
|
||||
setYears(data.years || []);
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load newsletter archive.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selectedTopic, selectedYear, selectedMonth]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchArchive();
|
||||
}, [fetchArchive]);
|
||||
|
||||
// Client-side text search on top of server results
|
||||
const filtered = newsletters.filter((n) => {
|
||||
if (!searchQuery.trim()) return true;
|
||||
const q = searchQuery.toLowerCase();
|
||||
return (
|
||||
n.name?.toLowerCase().includes(q) ||
|
||||
n.description?.toLowerCase().includes(q) ||
|
||||
n.header_text?.toLowerCase().includes(q) ||
|
||||
(Array.isArray(n.article_blocks) &&
|
||||
n.article_blocks.some(
|
||||
(b) =>
|
||||
b.title?.toLowerCase().includes(q) ||
|
||||
b.category?.toLowerCase().includes(q)
|
||||
))
|
||||
);
|
||||
});
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setSelectedTopic("All Topics");
|
||||
setSelectedYear("");
|
||||
setSelectedMonth("");
|
||||
setSearchQuery("");
|
||||
};
|
||||
|
||||
const hasActiveFilters =
|
||||
selectedTopic !== "All Topics" || selectedYear || selectedMonth || searchQuery;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<Header />
|
||||
|
||||
{/* Hero */}
|
||||
<div className="bg-[#111] border-b border-[#222] py-8">
|
||||
<div className="max-w-container mx-auto px-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="section-label">Newsletter</span>
|
||||
<div className="flex-1 h-px bg-[#2a2a2a]" />
|
||||
</div>
|
||||
<h1 className="font-heading text-white text-3xl font-bold">Newsletter Archive</h1>
|
||||
<p className="text-[#777] font-body text-sm mt-2">
|
||||
Browse past issues of the BroadcastBeat newsletter — searchable by date and topic.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main className="max-w-container mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
|
||||
{/* ── Left: Archive list ─────────────────────────────────────────── */}
|
||||
<div className="lg:col-span-8">
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="mb-5">
|
||||
<label htmlFor="archive-search" className="sr-only">Search newsletters</label>
|
||||
<div className="relative">
|
||||
<svg
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-[#555]"
|
||||
width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||||
aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.35-4.35" />
|
||||
</svg>
|
||||
<input
|
||||
id="archive-search"
|
||||
type="search"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search newsletters by title, topic, or content…"
|
||||
className="search-input w-full py-2.5 pl-9 pr-4 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Topic filter chips */}
|
||||
<div className="flex flex-wrap gap-2 mb-5" role="group" aria-label="Filter by topic">
|
||||
{TOPICS.map((topic) => (
|
||||
<button
|
||||
key={topic}
|
||||
onClick={() => setSelectedTopic(topic)}
|
||||
className={`font-body text-xs px-3 py-1.5 rounded-sm border transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
|
||||
selectedTopic === topic
|
||||
? "bg-[#3b82f6] border-[#3b82f6] text-white"
|
||||
: "bg-transparent border-[#333] text-[#888] hover:border-[#555] hover:text-[#ccc]"
|
||||
}`}
|
||||
aria-pressed={selectedTopic === topic}>
|
||||
{topic}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Date filters */}
|
||||
<div className="flex flex-wrap gap-3 mb-6">
|
||||
<div>
|
||||
<label htmlFor="filter-year" className="sr-only">Filter by year</label>
|
||||
<select
|
||||
id="filter-year"
|
||||
value={selectedYear}
|
||||
onChange={(e) => { setSelectedYear(e.target.value); setSelectedMonth(""); }}
|
||||
className="search-input py-2 px-3 text-sm min-w-[120px]">
|
||||
<option value="">All Years</option>
|
||||
{years.map((y) => (
|
||||
<option key={y} value={String(y)}>{y}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{selectedYear && (
|
||||
<div>
|
||||
<label htmlFor="filter-month" className="sr-only">Filter by month</label>
|
||||
<select
|
||||
id="filter-month"
|
||||
value={selectedMonth}
|
||||
onChange={(e) => setSelectedMonth(e.target.value)}
|
||||
className="search-input py-2 px-3 text-sm min-w-[140px]">
|
||||
{MONTHS.map((m) => (
|
||||
<option key={m.value} value={m.value}>{m.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
{hasActiveFilters && (
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
className="font-body text-xs text-[#3b82f6] hover:text-[#60a5fa] transition-colors underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
|
||||
Clear filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results count */}
|
||||
{!loading && (
|
||||
<p className="font-body text-[#555] text-xs mb-4" aria-live="polite">
|
||||
{filtered.length === 0
|
||||
? "No newsletters found"
|
||||
: `${filtered.length} ${filtered.length === 1 ? "issue" : "issues"} found`}
|
||||
{hasActiveFilters && " (filtered)"}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Loading */}
|
||||
{loading && (
|
||||
<div className="space-y-4" aria-busy="true" aria-label="Loading newsletters">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="bg-[#111] border border-[#222] rounded-sm p-5 animate-pulse">
|
||||
<div className="h-3 bg-[#1e1e1e] rounded w-24 mb-3" />
|
||||
<div className="h-5 bg-[#1e1e1e] rounded w-3/4 mb-2" />
|
||||
<div className="h-3 bg-[#1e1e1e] rounded w-full mb-1" />
|
||||
<div className="h-3 bg-[#1e1e1e] rounded w-2/3" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error */}
|
||||
{!loading && error && (
|
||||
<div className="bg-[#1a0a0a] border border-red-900 rounded-sm p-5 text-center" role="alert">
|
||||
<p className="font-body text-red-400 text-sm mb-3">{error}</p>
|
||||
<button
|
||||
onClick={fetchArchive}
|
||||
className="font-body text-xs text-[#3b82f6] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
|
||||
Try again
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!loading && !error && filtered.length === 0 && (
|
||||
<div className="text-center py-16 border border-[#222] rounded-sm">
|
||||
<svg
|
||||
className="mx-auto mb-4 text-[#333]"
|
||||
width="48" height="48" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
|
||||
aria-hidden="true">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
|
||||
<polyline points="22,6 12,13 2,6" />
|
||||
</svg>
|
||||
<p className="font-heading text-[#555] text-base font-bold mb-1">No newsletters found</p>
|
||||
<p className="font-body text-[#444] text-sm mb-4">
|
||||
Try adjusting your filters or search query.
|
||||
</p>
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
className="font-body text-xs text-[#3b82f6] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6]">
|
||||
Clear all filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Newsletter grid */}
|
||||
{!loading && !error && filtered.length > 0 && (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{filtered.map((newsletter) => (
|
||||
<NewsletterCard key={newsletter.id} newsletter={newsletter} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Right: Sidebar ─────────────────────────────────────────────── */}
|
||||
<aside className="lg:col-span-4 space-y-6">
|
||||
{/* Signup CTA */}
|
||||
<SignupCTA />
|
||||
|
||||
{/* Browse by topic */}
|
||||
<div className="bg-[#111] border border-[#222] rounded-sm p-5">
|
||||
<h3 className="font-heading text-[#e0e0e0] text-sm font-bold uppercase tracking-wider mb-4">
|
||||
Browse by Topic
|
||||
</h3>
|
||||
<ul className="space-y-1">
|
||||
{TOPICS.filter((t) => t !== "All Topics").map((topic) => (
|
||||
<li key={topic}>
|
||||
<button
|
||||
onClick={() => setSelectedTopic(topic)}
|
||||
className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
|
||||
selectedTopic === topic
|
||||
? "text-[#3b82f6] bg-[#3b82f6]/10"
|
||||
: "text-[#888] hover:text-[#ccc] hover:bg-[#1a1a1a]"
|
||||
}`}>
|
||||
{topic}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Browse by year */}
|
||||
{years.length > 0 && (
|
||||
<div className="bg-[#111] border border-[#222] rounded-sm p-5">
|
||||
<h3 className="font-heading text-[#e0e0e0] text-sm font-bold uppercase tracking-wider mb-4">
|
||||
Browse by Year
|
||||
</h3>
|
||||
<ul className="space-y-1">
|
||||
{years.map((year) => (
|
||||
<li key={year}>
|
||||
<button
|
||||
onClick={() => { setSelectedYear(String(year)); setSelectedMonth(""); }}
|
||||
className={`w-full text-left font-body text-sm py-1.5 px-2 rounded-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#3b82f6] ${
|
||||
selectedYear === String(year)
|
||||
? "text-[#3b82f6] bg-[#3b82f6]/10"
|
||||
: "text-[#888] hover:text-[#ccc] hover:bg-[#1a1a1a]"
|
||||
}`}>
|
||||
{year}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user