Janady13/missionmatch / frontend/src/components/ui.tsx

1import { type ReactNode, useEffect } from 'react' 2import { X } from 'lucide-react' 3import { num } from '../lib/format' 4 5// Modal is a dependency free overlay: a dimmed backdrop plus a centered, scrollable panel. Escape and a 6// backdrop click close it. The body scroll is locked while it is open so a tall result does not jump. 7export function Modal({ 8 open, 9 onClose, 10 title, 11 children, 12}: { 13 open: boolean 14 onClose: () => void 15 title: string 16 children: ReactNode 17}) { 18 useEffect(() => { 19 if (!open) return 20 const onKey = (e: KeyboardEvent) => { 21 if (e.key === 'Escape') onClose() 22 } 23 document.addEventListener('keydown', onKey) 24 const prev = document.body.style.overflow 25 document.body.style.overflow = 'hidden' 26 return () => { 27 document.removeEventListener('keydown', onKey) 28 document.body.style.overflow = prev 29 } 30 }, [open, onClose]) 31 32 if (!open) return null 33 return ( 34 <div 35 className="fixed inset-0 z-50 grid place-items-start overflow-y-auto bg-black/60 p-4 backdrop-blur-sm sm:p-8" 36 onClick={onClose} 37 > 38 <div 39 className="mx-auto w-full max-w-3xl rounded-xl border border-line/70 bg-surface shadow-2xl" 40 onClick={(e) => e.stopPropagation()} 41 > 42 <header className="flex items-center justify-between border-b border-line/60 px-4 py-3"> 43 <h3 className="text-sm font-bold">{title}</h3> 44 <button 45 onClick={onClose} 46 aria-label="Close" 47 className="grid size-7 place-items-center rounded-md text-muted hover:bg-navy-800 hover:text-ink" 48 > 49 <X size={16} /> 50 </button> 51 </header> 52 <div className="p-4">{children}</div> 53 </div> 54 </div> 55 ) 56} 57 58export function Panel({ 59 children, 60 className = '', 61 title, 62 hint, 63}: { 64 children: ReactNode 65 className?: string 66 title?: string 67 hint?: string 68}) { 69 return ( 70 <section 71 className={`rounded-xl border border-line/70 bg-surface/80 backdrop-blur-sm shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset] ${className}`} 72 > 73 {title && ( 74 <header className="flex items-center justify-between px-4 pt-3.5 pb-2"> 75 <h3 className="text-[11px] font-bold uppercase tracking-[0.14em] text-muted">{title}</h3> 76 {hint && <span className="text-[11px] text-faint">{hint}</span>} 77 </header> 78 )} 79 <div className={title ? 'px-4 pb-4' : 'p-4'}>{children}</div> 80 </section> 81 ) 82} 83 84export function Bar({ value, color }: { value: number; color: string }) { 85 return ( 86 <div className="h-2 w-full overflow-hidden rounded-full bg-navy-800"> 87 <div 88 className="h-full rounded-full transition-[width] duration-700 ease-out" 89 style={{ width: `${Math.max(0, Math.min(100, value))}%`, background: color }} 90 /> 91 </div> 92 ) 93} 94 95export function Badge({ 96 children, 97 color, 98 subtle = false, 99}: { 100 children: ReactNode 101 color: string 102 subtle?: boolean 103}) { 104 return ( 105 <span 106 className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wide" 107 style={ 108 subtle 109 ? { color, background: `color-mix(in srgb, ${color} 14%, transparent)` } 110 : { color: '#06121f', background: color } 111 } 112 > 113 {children} 114 </span> 115 ) 116} 117 118export function Dot({ color }: { color: string }) { 119 return <span className="inline-block size-2 rounded-full" style={{ background: color }} /> 120} 121 122export function Stat({ 123 label, 124 value, 125 accent, 126 icon, 127}: { 128 label: string 129 value: ReactNode 130 accent?: string 131 icon?: ReactNode 132}) { 133 return ( 134 <Panel className="px-4 py-3.5"> 135 <div className="flex items-center justify-between"> 136 <span className="text-[11px] font-semibold uppercase tracking-wider text-muted">{label}</span> 137 {icon && <span style={{ color: accent ?? 'var(--color-blue-soft)' }}>{icon}</span>} 138 </div> 139 <div className="mt-1 text-3xl font-extrabold tabular-nums" style={{ color: accent }}> 140 {value} 141 </div> 142 </Panel> 143 ) 144} 145 146// CheckRow renders a met (✓) / unmet (⚠) requirement line. 147export function CheckRow({ ok, label }: { ok: boolean; label: string }) { 148 return ( 149 <div className="flex items-center gap-2 text-sm"> 150 <span 151 className="grid size-4 place-items-center rounded-full text-[10px] font-bold" 152 style={{ 153 color: '#06121f', 154 background: ok ? 'var(--color-ok)' : 'var(--color-warn)', 155 }} 156 > 157 {ok ? '✓' : '!'} 158 </span> 159 <span className={ok ? 'text-ink' : 'text-warn'}>{label}</span> 160 </div> 161 ) 162} 163 164export function ScoreRow({ 165 name, 166 weight, 167 score, 168 color, 169}: { 170 name: string 171 weight: string 172 score: string 173 color: string 174}) { 175 return ( 176 <div className="grid grid-cols-[1fr_auto] items-center gap-x-3 gap-y-1.5"> 177 <div className="flex items-baseline justify-between"> 178 <span className="text-sm text-ink">{name}</span> 179 <span className="text-[11px] text-faint">{Math.round(Number(weight) * 100)}%</span> 180 </div> 181 <span className="text-sm font-semibold tabular-nums" style={{ color }}> 182 {num(score).toFixed(0)}% 183 </span> 184 <div className="col-span-2 -mt-0.5"> 185 <Bar value={num(score)} color={color} /> 186 </div> 187 </div> 188 ) 189} 190