Spaces:
Running
Running
| import React from 'react'; | |
| import { | |
| Printer, | |
| Download, | |
| FileText, | |
| Search, | |
| Mail, | |
| PenTool, | |
| Building2, | |
| Cpu, | |
| Calculator, | |
| Layers, | |
| BookOpen, | |
| Gavel, | |
| ShieldCheck, | |
| HardDrive, | |
| Zap, | |
| Database, | |
| Globe, | |
| Sparkles, | |
| ChevronDown, | |
| Check, | |
| RotateCcw, | |
| Loader2 | |
| } from 'lucide-react'; | |
| import { UNIFIED_DOCUMENT_METADATA } from '../data/unifiedDocumentData'; | |
| import { SUPPORTED_LEGAL_LANGUAGES, LegalLanguage } from '../services/geminiTranslationService'; | |
| export type AppTab = | |
| | 'document' | |
| | 'customCusip' | |
| | 'workspace' | |
| | 'dataHub' | |
| | 'rule18' | |
| | 'onlineSign' | |
| | 'wyomingTrust' | |
| | 'algorithms' | |
| | 'verification' | |
| | 'tabsManifest' | |
| | 'summary'; | |
| interface Props { | |
| activeTab: AppTab; | |
| setActiveTab: (tab: AppTab) => void; | |
| searchQuery: string; | |
| setSearchQuery: (q: string) => void; | |
| showLineNumbers: boolean; | |
| setShowLineNumbers: (v: boolean) => void; | |
| fontSize: 'small' | 'medium' | 'large'; | |
| setFontSize: (s: 'small' | 'medium' | 'large') => void; | |
| onOpenExportModal: () => void; | |
| onOpenEmailModal: () => void; | |
| selectedLanguage: string; | |
| onSelectLanguage: (lang: string) => void; | |
| isTranslating?: boolean; | |
| } | |
| export const Header: React.FC<Props> = ({ | |
| activeTab, | |
| setActiveTab, | |
| searchQuery, | |
| setSearchQuery, | |
| showLineNumbers, | |
| setShowLineNumbers, | |
| fontSize, | |
| setFontSize, | |
| onOpenExportModal, | |
| onOpenEmailModal, | |
| selectedLanguage, | |
| onSelectLanguage, | |
| isTranslating = false | |
| }) => { | |
| const [isLangDropdownOpen, setIsLangDropdownOpen] = React.useState<boolean>(false); | |
| const langDropdownRef = React.useRef<HTMLDivElement>(null); | |
| // Close dropdown on outside click | |
| React.useEffect(() => { | |
| const handleClickOutside = (event: MouseEvent) => { | |
| if (langDropdownRef.current && !langDropdownRef.current.contains(event.target as Node)) { | |
| setIsLangDropdownOpen(false); | |
| } | |
| }; | |
| document.addEventListener('mousedown', handleClickOutside); | |
| return () => document.removeEventListener('mousedown', handleClickOutside); | |
| }, []); | |
| const currentLang = SUPPORTED_LEGAL_LANGUAGES.find(l => l.code === selectedLanguage) || SUPPORTED_LEGAL_LANGUAGES[0]; | |
| const handlePrint = () => { | |
| window.print(); | |
| }; | |
| return ( | |
| <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-40 shadow-xl no-print"> | |
| <div className="max-w-7xl mx-auto px-4 py-3"> | |
| <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3"> | |
| {/* Title and institution logos / labels */} | |
| <div className="flex items-center gap-3"> | |
| <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 via-blue-600 to-amber-600 flex items-center justify-center text-white shadow-md shadow-indigo-900/30 font-serif font-black text-xl shrink-0"> | |
| § | |
| </div> | |
| <div> | |
| <div className="flex flex-wrap items-center gap-1.5 sm:gap-2"> | |
| <span className="text-[11px] font-bold px-2 py-0.5 rounded bg-amber-500/20 text-amber-300 border border-amber-500/30"> | |
| BALTIMORE COUNTY CIRCUIT COURT | |
| </span> | |
| <span className="text-xs text-slate-500">•</span> | |
| <span className="text-[11px] font-bold px-2 py-0.5 rounded bg-blue-500/20 text-blue-300 border border-blue-500/30"> | |
| D.C. CIRCUIT | |
| </span> | |
| <span className="text-xs text-slate-500">•</span> | |
| <span className="text-[11px] font-bold px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30"> | |
| BNY MELLON CORPORATE TRUST | |
| </span> | |
| <span className="text-xs text-slate-500">•</span> | |
| <span className="text-[11px] font-mono font-bold px-2 py-0.5 rounded bg-purple-500/20 text-purple-300 border border-purple-500/30"> | |
| FILING: NOV 3, 2026 | |
| </span> | |
| </div> | |
| <h1 className="text-base sm:text-lg font-bold text-slate-100 tracking-tight leading-tight mt-0.5"> | |
| Master Mandamus, Custodial Settlement & Rule 18 Exaction of Liberty Omnibus | |
| </h1> | |
| </div> | |
| </div> | |
| {/* Action buttons */} | |
| <div className="flex flex-wrap items-center gap-2"> | |
| {/* Search input */} | |
| <div className="relative min-w-[170px] sm:min-w-[210px]"> | |
| <Search className="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2 pointer-events-none" /> | |
| <input | |
| type="text" | |
| value={searchQuery} | |
| onChange={(e) => setSearchQuery(e.target.value)} | |
| placeholder="Search CUSIP, Rule 18, counts..." | |
| className="w-full pl-8 pr-3 py-1.5 text-xs bg-slate-950 border border-slate-700/80 rounded-lg text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 transition-all" | |
| /> | |
| {searchQuery && ( | |
| <button | |
| onClick={() => setSearchQuery('')} | |
| className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 text-xs" | |
| > | |
| ✕ | |
| </button> | |
| )} | |
| </div> | |
| {/* Language Toggle with Gemini 3.8 Flash Juridical Translation */} | |
| <div className="relative" ref={langDropdownRef}> | |
| <button | |
| type="button" | |
| onClick={() => setIsLangDropdownOpen(!isLangDropdownOpen)} | |
| title="Translate key legal clauses in real time using Google Gemini 3.8 Flash" | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold border transition-all cursor-pointer ${ | |
| selectedLanguage !== 'en' | |
| ? 'bg-indigo-600 text-white border-indigo-400 shadow-md shadow-indigo-900/50' | |
| : 'bg-slate-800 hover:bg-slate-700 text-slate-200 border-slate-700' | |
| }`} | |
| > | |
| {isTranslating ? ( | |
| <Loader2 className="w-3.5 h-3.5 text-amber-300 animate-spin" /> | |
| ) : ( | |
| <Globe className={`w-3.5 h-3.5 ${selectedLanguage !== 'en' ? 'text-amber-300' : 'text-indigo-400'}`} /> | |
| )} | |
| <span>{currentLang.flag} {currentLang.code.toUpperCase()}</span> | |
| <Sparkles className="w-3 h-3 text-amber-300 hidden sm:inline" /> | |
| <ChevronDown className={`w-3 h-3 text-slate-400 transition-transform ${isLangDropdownOpen ? 'rotate-180' : ''}`} /> | |
| </button> | |
| {/* Translation Dropdown Menu */} | |
| {isLangDropdownOpen && ( | |
| <div className="absolute right-0 mt-2 w-80 sm:w-96 bg-slate-900 border border-slate-700 rounded-xl shadow-2xl p-3 z-50 animate-in fade-in slide-in-from-top-2 duration-150"> | |
| {/* Dropdown Header */} | |
| <div className="flex items-center justify-between pb-2.5 mb-2 border-b border-slate-800"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-6 h-6 rounded-md bg-indigo-600/30 border border-indigo-500/40 flex items-center justify-center text-amber-300"> | |
| <Sparkles className="w-3.5 h-3.5" /> | |
| </div> | |
| <div> | |
| <div className="text-xs font-bold text-white flex items-center gap-1.5"> | |
| <span>Gemini 3.8 Flash Translation</span> | |
| <span className="text-[10px] px-1.5 py-0.2 rounded bg-amber-500/20 text-amber-300 font-mono border border-amber-500/30"> | |
| v3.8 | |
| </span> | |
| </div> | |
| <div className="text-[10px] text-slate-400"> | |
| Real-time multilingual jurist for key master pleading clauses | |
| </div> | |
| </div> | |
| </div> | |
| {selectedLanguage !== 'en' && ( | |
| <button | |
| onClick={() => { | |
| onSelectLanguage('en'); | |
| setIsLangDropdownOpen(false); | |
| }} | |
| className="flex items-center gap-1 text-[10px] text-indigo-400 hover:text-indigo-200 px-2 py-0.5 rounded bg-indigo-950/60 border border-indigo-800/80 cursor-pointer" | |
| title="Revert to English Master Pleading" | |
| > | |
| <RotateCcw className="w-2.5 h-2.5" /> | |
| <span>Reset EN</span> | |
| </button> | |
| )} | |
| </div> | |
| {/* Language Options List */} | |
| <div className="space-y-1.5 max-h-72 overflow-y-auto pr-1"> | |
| {SUPPORTED_LEGAL_LANGUAGES.map((lang) => { | |
| const isSelected = selectedLanguage === lang.code; | |
| return ( | |
| <button | |
| key={lang.code} | |
| type="button" | |
| onClick={() => { | |
| onSelectLanguage(lang.code); | |
| setIsLangDropdownOpen(false); | |
| }} | |
| className={`w-full text-left p-2 rounded-lg text-xs transition-colors cursor-pointer flex items-start justify-between gap-2 border ${ | |
| isSelected | |
| ? 'bg-indigo-950/80 border-indigo-500/60 text-white shadow-xs' | |
| : 'bg-slate-950/50 hover:bg-slate-850 border-slate-800/80 text-slate-300 hover:border-slate-700' | |
| }`} | |
| > | |
| <div className="flex items-start gap-2.5"> | |
| <span className="text-base select-none shrink-0 pt-0.5">{lang.flag}</span> | |
| <div> | |
| <div className="flex items-center gap-1.5 font-bold"> | |
| <span className={isSelected ? 'text-indigo-300' : 'text-slate-100'}> | |
| {lang.name} | |
| </span> | |
| <span className="text-[11px] font-normal text-slate-400"> | |
| ({lang.localName}) | |
| </span> | |
| <span className="text-[9px] uppercase font-mono px-1.5 py-0.2 rounded bg-slate-800 text-slate-400 border border-slate-700"> | |
| {lang.badge} | |
| </span> | |
| </div> | |
| <p className="text-[10px] text-slate-400 mt-0.5 leading-snug"> | |
| {lang.significance} | |
| </p> | |
| </div> | |
| </div> | |
| {isSelected && ( | |
| <Check className="w-4 h-4 text-emerald-400 shrink-0 mt-1" /> | |
| )} | |
| </button> | |
| ); | |
| })} | |
| </div> | |
| {/* Dropdown Footer Safeguards */} | |
| <div className="mt-2.5 pt-2 border-t border-slate-800 text-[10px] text-slate-400 space-y-1"> | |
| <div className="flex items-center gap-1 text-emerald-400 font-mono"> | |
| <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block"></span> | |
| <span>Model: gemini-3.8-flash (Server-Side Proxy)</span> | |
| </div> | |
| <p className="text-[9.5px] text-slate-500 leading-tight"> | |
| Preserves canonical Bluebook legal citations, $500M / 45.85M LEU share capitalization, 30 row homes SSDI/SSI carveout, and court docket numbers verbatim across all translations. | |
| </p> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| {/* 1-Click Send All Button */} | |
| <button | |
| onClick={onOpenEmailModal} | |
| title="1-Click Batch Send All Messages, Correspondence, and Exhibits" | |
| className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-gradient-to-r from-amber-500 via-indigo-600 to-emerald-600 hover:brightness-110 text-white text-xs font-bold shadow-md shadow-indigo-950/40 transition-all cursor-pointer" | |
| > | |
| <Zap className="w-3.5 h-3.5 text-amber-200" /> | |
| <span>⚡ 1-Click Send All</span> | |
| </button> | |
| {/* Send Out Emails Button */} | |
| <button | |
| onClick={onOpenEmailModal} | |
| title="Open Official Email Transmission & Document Presentation Hub" | |
| className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium border border-slate-700 transition-colors cursor-pointer" | |
| > | |
| <Mail className="w-3.5 h-3.5 text-indigo-400" /> | |
| <span className="hidden sm:inline">Review Emails</span> | |
| </button> | |
| {/* Print / Save PDF */} | |
| <button | |
| onClick={handlePrint} | |
| title="Print official court pleading or save to PDF" | |
| className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium border border-slate-700 transition-colors cursor-pointer" | |
| > | |
| <Printer className="w-3.5 h-3.5 text-indigo-400" /> | |
| <span className="hidden sm:inline">Print / PDF</span> | |
| </button> | |
| {/* Export Markdown / LaTeX */} | |
| <button | |
| onClick={onOpenExportModal} | |
| title="Export complete merged document in LaTeX, Markdown or Plain Text" | |
| className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-medium border border-slate-700 transition-colors cursor-pointer" | |
| > | |
| <Download className="w-3.5 h-3.5" /> | |
| <span>Export</span> | |
| </button> | |
| </div> | |
| </div> | |
| {/* Sub-bar with view tabs & reading controls */} | |
| <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 mt-3 pt-2.5 border-t border-slate-800/80"> | |
| {/* Navigation view modes */} | |
| <div className="flex items-center gap-1 overflow-x-auto pb-1 lg:pb-0"> | |
| <button | |
| onClick={() => setActiveTab('document')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'document' | |
| ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <FileText className="w-3.5 h-3.5" /> | |
| <span>Master Pleading (12 Parts)</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('customCusip')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'customCusip' | |
| ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <Sparkles className="w-3.5 h-3.5 text-amber-400" /> | |
| <span>CUSIP Studio & Docs</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('workspace')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'workspace' | |
| ? 'bg-blue-500/20 text-blue-300 border border-blue-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <HardDrive className="w-3.5 h-3.5 text-blue-400" /> | |
| <span>Google Workspace Hub</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('dataHub')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'dataHub' | |
| ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <Database className="w-3.5 h-3.5 text-emerald-400" /> | |
| <span>Case & Science Hub (PACER/PubMed)</span> | |
| <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse ml-0.5" title="PACER Background Worker Active" /> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('rule18')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'rule18' | |
| ? 'bg-red-500/20 text-red-300 border border-red-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <Gavel className="w-3.5 h-3.5 text-red-400" /> | |
| <span>Rule 18 Exaction (All Iterations)</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('onlineSign')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'onlineSign' | |
| ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <PenTool className="w-3.5 h-3.5 text-emerald-400" /> | |
| <span>Sign Online</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('wyomingTrust')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'wyomingTrust' | |
| ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <Building2 className="w-3.5 h-3.5 text-amber-400" /> | |
| <span>Liquidation Trust (WY)</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('algorithms')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'algorithms' | |
| ? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <Cpu className="w-3.5 h-3.5 text-cyan-400" /> | |
| <span>31 Algorithms</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('tabsManifest')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'tabsManifest' | |
| ? 'bg-amber-500/20 text-amber-300 border border-amber-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <Layers className="w-3.5 h-3.5" /> | |
| <span>Execution Tabs (A–J)</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('verification')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'verification' | |
| ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <Calculator className="w-3.5 h-3.5" /> | |
| <span>Auditor & Math</span> | |
| </button> | |
| <button | |
| onClick={() => setActiveTab('summary')} | |
| className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer whitespace-nowrap ${ | |
| activeTab === 'summary' | |
| ? 'bg-purple-500/20 text-purple-300 border border-purple-500/40 shadow-xs font-bold' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' | |
| }`} | |
| > | |
| <BookOpen className="w-3.5 h-3.5" /> | |
| <span>Synthesis</span> | |
| </button> | |
| </div> | |
| {/* Reading & pleading view controls + Quick Language Switch */} | |
| <div className="flex flex-wrap items-center gap-2 text-xs text-slate-400 self-end lg:self-auto"> | |
| {/* Quick Language Toggle Pills */} | |
| <div className="flex items-center gap-1 bg-slate-950/80 p-0.5 rounded-lg border border-slate-800"> | |
| <span className="text-[10px] text-slate-500 font-mono pl-1.5 pr-0.5 hidden sm:inline flex items-center gap-1"> | |
| <Globe className="w-3 h-3 text-slate-400" /> | |
| <span>Lang:</span> | |
| </span> | |
| {SUPPORTED_LEGAL_LANGUAGES.map((lang) => { | |
| const isActive = selectedLanguage === lang.code; | |
| return ( | |
| <button | |
| key={lang.code} | |
| onClick={() => onSelectLanguage(lang.code)} | |
| title={`${lang.name} (${lang.localName}) — ${lang.significance}`} | |
| className={`px-1.5 py-0.5 rounded text-[10px] font-bold transition-all cursor-pointer ${ | |
| isActive | |
| ? 'bg-indigo-600 text-white shadow-xs font-mono' | |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800 font-mono' | |
| }`} | |
| > | |
| {lang.code.toUpperCase()} | |
| </button> | |
| ); | |
| })} | |
| {selectedLanguage !== 'en' && ( | |
| <span className="text-[9px] px-1 py-0.2 rounded bg-amber-500/20 text-amber-300 font-mono border border-amber-500/30 ml-0.5 flex items-center gap-0.5"> | |
| <Sparkles className="w-2.5 h-2.5 text-amber-300" /> | |
| <span className="hidden md:inline">Gemini 3.8</span> | |
| </span> | |
| )} | |
| </div> | |
| <div className="h-3 w-px bg-slate-800 hidden sm:block"></div> | |
| <label className="flex items-center gap-1.5 cursor-pointer select-none text-[11px] hover:text-slate-200"> | |
| <input | |
| type="checkbox" | |
| checked={showLineNumbers} | |
| onChange={(e) => setShowLineNumbers(e.target.checked)} | |
| className="rounded border-slate-700 bg-slate-900 text-indigo-500 focus:ring-0 focus:ring-offset-0" | |
| /> | |
| <span>Pleading Lines</span> | |
| </label> | |
| <div className="h-3 w-px bg-slate-800"></div> | |
| <div className="flex items-center gap-1 text-[11px]"> | |
| <span className="text-slate-500">Text:</span> | |
| <button | |
| onClick={() => setFontSize('small')} | |
| className={`px-1.5 py-0.5 rounded cursor-pointer ${fontSize === 'small' ? 'bg-slate-700 text-white font-bold' : 'hover:text-slate-200'}`} | |
| > | |
| A | |
| </button> | |
| <button | |
| onClick={() => setFontSize('medium')} | |
| className={`px-1.5 py-0.5 rounded cursor-pointer text-xs ${fontSize === 'medium' ? 'bg-slate-700 text-white font-bold' : 'hover:text-slate-200'}`} | |
| > | |
| A+ | |
| </button> | |
| <button | |
| onClick={() => setFontSize('large')} | |
| className={`px-1.5 py-0.5 rounded cursor-pointer text-sm ${fontSize === 'large' ? 'bg-slate-700 text-white font-bold' : 'hover:text-slate-200'}`} | |
| > | |
| A++ | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| ); | |
| }; | |