| import React from 'react'; |
| import { |
| Printer, |
| Download, |
| FileText, |
| Search, |
| SlidersHorizontal, |
| Sparkles, |
| BookOpen, |
| Calculator, |
| Shield, |
| Layers, |
| CheckCheck |
| } from 'lucide-react'; |
| import { UNIFIED_DOCUMENT_METADATA } from '../data/unifiedDocumentData'; |
|
|
| interface Props { |
| activeTab: 'document' | 'verification' | 'summary' | 'tabsManifest'; |
| setActiveTab: (tab: 'document' | 'verification' | 'summary' | 'tabsManifest') => 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; |
| } |
|
|
| export const Header: React.FC<Props> = ({ |
| activeTab, |
| setActiveTab, |
| searchQuery, |
| setSearchQuery, |
| showLineNumbers, |
| setShowLineNumbers, |
| fontSize, |
| setFontSize, |
| onOpenExportModal |
| }) => { |
| 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 md:flex-row md: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-lg bg-gradient-to-br from-indigo-500 to-amber-600 flex items-center justify-center text-white shadow-md shadow-indigo-900/30 font-serif font-black text-lg shrink-0"> |
| § |
| </div> |
| <div> |
| <div className="flex items-center gap-2"> |
| <span className="text-xs font-semibold px-2 py-0.5 rounded bg-blue-500/20 text-blue-300 border border-blue-500/30"> |
| D.C. CIRCUIT COURTS |
| </span> |
| <span className="text-xs text-slate-500">•</span> |
| <span className="text-xs font-semibold px-2 py-0.5 rounded bg-amber-500/20 text-amber-300 border border-amber-500/30"> |
| BNY MELLON CORPORATE TRUST |
| </span> |
| <span className="text-xs font-semibold px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 hidden sm:inline-block"> |
| UNIFIED 100% |
| </span> |
| </div> |
| <h1 className="text-base sm:text-lg font-bold text-slate-100 tracking-tight leading-tight mt-0.5"> |
| Master Mandamus, Accounting Demand & Custodial Settlement Omnibus |
| </h1> |
| </div> |
| </div> |
| |
| {/* Action buttons */} |
| <div className="flex flex-wrap items-center gap-2"> |
| {/* Search input */} |
| <div className="relative min-w-[180px] sm:min-w-[220px]"> |
| <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 legal text, CUSIP, 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> |
| |
| {/* 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-indigo-600 hover:bg-indigo-500 text-white text-xs font-medium shadow-sm 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 sm:flex-row sm: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 sm: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' |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' |
| }`} |
| > |
| <FileText className="w-3.5 h-3.5" /> |
| <span>Master Pleading & Directives</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-emerald-500/20 text-emerald-300 border border-emerald-500/40 shadow-xs' |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' |
| }`} |
| > |
| <Calculator className="w-3.5 h-3.5" /> |
| <span>Interactive Audit & Math Engine</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' |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' |
| }`} |
| > |
| <Layers className="w-3.5 h-3.5" /> |
| <span>Execution Package (Tabs A–I)</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' |
| : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60' |
| }`} |
| > |
| <BookOpen className="w-3.5 h-3.5" /> |
| <span>Harmonization Synthesis</span> |
| </button> |
| </div> |
| |
| {/* Reading & pleading view controls */} |
| <div className="flex items-center gap-2 text-xs text-slate-400 self-end sm:self-auto"> |
| <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> |
| ); |
| }; |
|
|
