32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { METRIC_EXPLANATIONS } from '@/lib/metrics';
|
||
|
|
import styles from './MetricTooltip.module.css';
|
||
|
|
|
||
|
|
interface MetricTooltipProps {
|
||
|
|
metricKey?: string;
|
||
|
|
label?: string;
|
||
|
|
plain?: string;
|
||
|
|
detail?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MetricTooltip({ metricKey, label, plain, detail }: MetricTooltipProps) {
|
||
|
|
const explanation = metricKey ? METRIC_EXPLANATIONS[metricKey] : undefined;
|
||
|
|
const tooltipLabel = label ?? explanation?.label;
|
||
|
|
const tooltipPlain = plain ?? explanation?.plain;
|
||
|
|
const tooltipDetail = detail ?? explanation?.detail;
|
||
|
|
|
||
|
|
if (!tooltipPlain) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<span className={styles.wrapper}>
|
||
|
|
<span className={styles.icon} aria-label={tooltipLabel ?? 'More information'} role="img">ⓘ</span>
|
||
|
|
<span className={styles.tooltip} role="tooltip">
|
||
|
|
{tooltipLabel && <span className={styles.tooltipLabel}>{tooltipLabel}</span>}
|
||
|
|
<span className={styles.tooltipPlain}>{tooltipPlain}</span>
|
||
|
|
{tooltipDetail && <span className={styles.tooltipDetail}>{tooltipDetail}</span>}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|