Public Access
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
import type { Tweaks, ThemeMode, FontSize, FeedbackTweak } from '../types'
|
||
|
||
interface Props {
|
||
tweaks: Tweaks
|
||
update: <K extends keyof Tweaks>(key: K, value: Tweaks[K]) => void
|
||
onClose: () => void
|
||
}
|
||
|
||
function Seg({ tkey, options, tweaks, update }: {
|
||
tkey: keyof Tweaks
|
||
options: { value: string; label: string }[]
|
||
tweaks: Tweaks
|
||
update: Props['update']
|
||
}) {
|
||
return (
|
||
<div className="tweak-control">
|
||
{options.map((opt) => (
|
||
<button
|
||
key={opt.value}
|
||
className={`tweak-seg${tweaks[tkey] === opt.value ? ' active' : ''}`}
|
||
onClick={() => update(tkey, opt.value as never)}
|
||
>
|
||
{opt.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default function TweaksPanel({ tweaks, update, onClose }: Props) {
|
||
return (
|
||
<div className="tweaks-panel">
|
||
<div className="tweaks-header">
|
||
<span>Tweaks</span>
|
||
<button className="btn btn-ghost btn-sm" onClick={onClose} style={{ padding: '2px 6px' }}>×</button>
|
||
</div>
|
||
<div className="tweaks-body">
|
||
<div className="tweak-row">
|
||
<div className="tweak-label">Theme</div>
|
||
<Seg tkey="theme" options={[{ value: 'light' as ThemeMode, label: 'Light' }, { value: 'dark' as ThemeMode, label: 'Dark' }]} tweaks={tweaks} update={update} />
|
||
</div>
|
||
<div className="tweak-row">
|
||
<div className="tweak-label">Text size</div>
|
||
<Seg tkey="fontSize" options={[{ value: 'small' as FontSize, label: 'S' }, { value: 'medium' as FontSize, label: 'M' }, { value: 'large' as FontSize, label: 'L' }]} tweaks={tweaks} update={update} />
|
||
</div>
|
||
<div className="tweak-row">
|
||
<div className="tweak-label">Feedback</div>
|
||
<Seg tkey="feedbackMode" options={[
|
||
{ value: 'auto' as FeedbackTweak, label: 'Auto' },
|
||
{ value: 'immediate' as FeedbackTweak, label: 'Immediate' },
|
||
{ value: 'end' as FeedbackTweak, label: 'End' },
|
||
]} tweaks={tweaks} update={update} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|