// Shared UI components for Current Affairs Archive const { useState, useEffect, useMemo, useRef } = React; // ============ ICONS (inline SVG, stroke-based) ============ const Icon = { Search: (p) => , Bookmark: (p) => , BookmarkFill: (p) => , Check: (p) => , Clock: (p) => , ChevL: (p) => , ChevR: (p) => , ChevDown: (p) => , Calendar: (p) => , Home: (p) => , Layers: (p) => , Flame: (p) => , Sparkle: (p) => , Filter: (p) => , X: (p) => , Book: (p) => , ArrowR: (p) => , }; // ============ CATEGORY PILL ============ function CategoryPill({ category, size = "md" }) { const c = CATEGORIES[category]; if (!c) return null; const px = size === "sm" ? "5px 8px" : "6px 10px"; const fs = size === "sm" ? 10.5 : 11.5; return ( {c.label} ); } // ============ NAVBAR ============ function Navbar({ route, setRoute, search, setSearch, sidebarLayout }) { const navItems = [ { id: "home", label: "Today", icon: Icon.Home }, { id: "archive", label: "Archive", icon: Icon.Calendar }, { id: "revise", label: "Revision", icon: Icon.Book }, ]; return (
setRoute({ page: "home" })}>
Bulletin
RBI Grade B · Current Affairs
{sidebarLayout === "top" && ( )}
setSearch(e.target.value)} /> ⌘K
7
AS
); } // ============ LEFT RAIL SIDEBAR ============ function LeftRail({ route, setRoute }) { const items = [ { id: "home", label: "Today", icon: Icon.Home, hint: "Latest" }, { id: "archive", label: "Archive", icon: Icon.Calendar, hint: "By date" }, { id: "revise", label: "Revision", icon: Icon.Book, hint: "Weekly" }, { id: "saved", label: "Bookmarks", icon: Icon.Bookmark, hint: "Saved" }, ]; const cats = Object.keys(CATEGORIES); return ( ); } // ============ NEWS CARD ============ function NewsCard({ article, onOpen, bookmarks, toggleBookmark, revised, toggleRevised, variant = "default" }) { const c = CATEGORIES[article.category]; const isB = bookmarks.has(article.id); const isR = revised.has(article.id); const dateObj = new Date(article.date); const dateLabel = dateObj.toLocaleDateString("en-IN", { day: "numeric", month: "short" }); if (variant === "compact") { return ( ); } return (
onOpen(article)}>
{dateLabel} {article.readTime} min read {isR && Revised}

{article.title}

{article.summary}

{article.concepts.slice(0, 3).map(con => ( {con} ))} {article.concepts.length > 3 && ( +{article.concepts.length - 3} )}
e.stopPropagation()}>
); } // ============ MCQ COMPONENT ============ function MCQ({ mcq, idx }) { const [picked, setPicked] = useState(null); const correct = mcq.answer; return (
Q{idx + 1} {mcq.q}
{mcq.options.map((opt, i) => { const state = picked == null ? "idle" : i === correct ? "correct" : i === picked ? "wrong" : "muted"; const letter = String.fromCharCode(65 + i); return ( ); })}
{picked != null && (
{picked === correct ? "Correct." : "Not quite."} Why:
{mcq.explain}
)}
); } // ============ HEATMAP CALENDAR ============ function HeatmapCalendar({ year, month, onPick, selectedDate }) { // month: 0-11 const first = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0).getDate(); const startDow = (first.getDay() + 6) % 7; // Mon-first const cells = []; for (let i = 0; i < startDow; i++) cells.push(null); for (let d = 1; d <= lastDay; d++) cells.push(d); while (cells.length % 7 !== 0) cells.push(null); const heatLevel = (count) => { if (count == null) return 0; if (count === 0) return 0; if (count <= 3) return 1; if (count <= 6) return 2; if (count <= 9) return 3; return 4; }; const monthName = first.toLocaleDateString("en-IN", { month: "long", year: "numeric" }); return (
{monthName}
Less {[0,1,2,3,4].map(l => )} More
{["Mon","Tue","Wed","Thu","Fri","Sat","Sun"].map(d =>
{d}
)}
{cells.map((d, i) => { if (d == null) return
; const dateStr = `${year}-${String(month+1).padStart(2,"0")}-${String(d).padStart(2,"0")}`; const count = HEATMAP[dateStr]; const lvl = heatLevel(count); const isSelected = selectedDate === dateStr; const isFuture = new Date(dateStr) > new Date('2026-05-04'); return ( ); })}
); } // Helpers function fmtDate(dateStr, opts = { weekday: "long", day: "numeric", month: "long", year: "numeric" }) { return new Date(dateStr).toLocaleDateString("en-IN", opts); } Object.assign(window, { Icon, CategoryPill, Navbar, LeftRail, NewsCard, MCQ, HeatmapCalendar, fmtDate, });