47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useExplainMode } from '@/contexts/ExplainModeContext';
|
|
|
|
interface ExplainTooltipProps {
|
|
explanation: string;
|
|
children: React.ReactNode;
|
|
inline?: boolean;
|
|
}
|
|
|
|
// Wraps an element. When Explain Mode is on, renders a small annotation
|
|
// directly below `children` describing what the wrapped element means.
|
|
// When off, renders children unchanged with no DOM cost.
|
|
|
|
export default function ExplainTooltip({ explanation, children, inline = false }: ExplainTooltipProps) {
|
|
const { explainMode } = useExplainMode();
|
|
|
|
if (!explainMode) return <>{children}</>;
|
|
|
|
const wrapperTag = inline ? 'span' : 'div';
|
|
const Wrapper = wrapperTag as 'span';
|
|
return (
|
|
<Wrapper className="explain-wrap" style={{ display: inline ? 'inline-block' : 'block' }}>
|
|
{children}
|
|
<span
|
|
role="note"
|
|
className="explain-tip"
|
|
style={{
|
|
display: 'block',
|
|
marginTop: 6,
|
|
padding: '6px 10px',
|
|
fontSize: 12,
|
|
fontFamily: 'var(--font-mono, monospace)',
|
|
color: 'var(--text-secondary)',
|
|
background: 'rgba(0, 212, 160, 0.10)',
|
|
border: '1px solid rgba(0, 212, 160, 0.30)',
|
|
borderRadius: 6,
|
|
lineHeight: 1.4,
|
|
}}
|
|
>
|
|
<span aria-hidden="true" style={{ marginRight: 6, opacity: 0.7 }}>?</span>
|
|
{explanation}
|
|
</span>
|
|
</Wrapper>
|
|
);
|
|
}
|