80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useExplainMode } from '@/contexts/ExplainModeContext';
|
|
|
|
interface ExplainModeToggleProps {
|
|
variant?: 'compact' | 'full';
|
|
}
|
|
|
|
function EyeIcon({ open }: { open: boolean }) {
|
|
if (open) {
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
</svg>
|
|
);
|
|
}
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M17.94 17.94A10.06 10.06 0 0 1 12 19c-6.5 0-10-7-10-7a17.81 17.81 0 0 1 4.06-5.06" />
|
|
<path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a17.81 17.81 0 0 1-3.06 3.94" />
|
|
<line x1="2" y1="2" x2="22" y2="22" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default function ExplainModeToggle({ variant = 'compact' }: ExplainModeToggleProps) {
|
|
const { explainMode, toggleExplainMode } = useExplainMode();
|
|
|
|
if (variant === 'full') {
|
|
return (
|
|
<label
|
|
className="flex cursor-pointer items-center justify-between gap-3 rounded border p-3"
|
|
style={{
|
|
background: 'var(--bg-surface)',
|
|
borderColor: 'var(--border-light)',
|
|
color: 'var(--text-primary)',
|
|
}}
|
|
>
|
|
<span className="flex-1">
|
|
<span className="block text-sm font-semibold">Explain Like I'm New</span>
|
|
<span className="block text-xs" style={{ color: 'var(--text-secondary)' }}>
|
|
Adds plain-English notes under each number, grade, and signal.
|
|
</span>
|
|
</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={explainMode}
|
|
onChange={toggleExplainMode}
|
|
aria-label="Toggle Explain Like I'm New"
|
|
className="h-5 w-9 cursor-pointer appearance-none rounded-full transition-colors"
|
|
style={{
|
|
background: explainMode ? 'var(--grade-a)' : 'var(--bg-elevated)',
|
|
}}
|
|
/>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={toggleExplainMode}
|
|
aria-pressed={explainMode}
|
|
aria-label={explainMode ? 'Disable explanations' : 'Enable explanations'}
|
|
title={explainMode ? 'Explanations on' : 'Explanations off'}
|
|
className="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-semibold"
|
|
style={{
|
|
color: explainMode ? 'var(--grade-a)' : 'var(--text-tertiary)',
|
|
background: explainMode ? 'rgba(0,212,160,0.10)' : 'transparent',
|
|
border: '1px solid',
|
|
borderColor: explainMode ? 'rgba(0,212,160,0.30)' : 'var(--border-light)',
|
|
}}
|
|
>
|
|
<EyeIcon open={explainMode} />
|
|
{explainMode && <span>Beginner</span>}
|
|
</button>
|
|
);
|
|
}
|