mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
feat(frontend): annotate key numbers with meaning (#18)
Add shared Meaning primitive and pure interpretation helpers for interval, tyre age, and championship gap columns on the live tower, tyre deg panel, and championship hub. Thresholds are exported consts (undercut window tied to PIT_LOSS_SECONDS from #13). Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
26
frontend/src/components/Meaning.tsx
Normal file
26
frontend/src/components/Meaning.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import '../styles/meaning.css'
|
||||
|
||||
export interface MeaningProps {
|
||||
value: ReactNode
|
||||
meaning?: string | null
|
||||
/** Long-form explanation for the native tooltip; falls back to meaning. */
|
||||
title?: string | null
|
||||
tone?: 'good' | 'bad' | 'neutral' | 'warn'
|
||||
}
|
||||
|
||||
export function Meaning({ value, meaning, title, tone }: MeaningProps) {
|
||||
if (!meaning) {
|
||||
return <>{value}</>
|
||||
}
|
||||
|
||||
const tooltip = title ?? meaning
|
||||
const toneClass = tone ? `meaning-caption--${tone}` : ''
|
||||
|
||||
return (
|
||||
<span className="meaning" title={tooltip}>
|
||||
<span className="meaning-value">{value}</span>
|
||||
<span className={`meaning-caption ${toneClass}`.trim()}>{meaning}</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user