1de956dSimplify the interface for first-time visitorsJeremy Magland 1import type { CSSProperties, ReactNode } from 'react'
3interface Props {
4 /** the series colour from the palette; the swatch and the on-state carry it */
5 color: string
6 on: boolean
7 onChange: (on: boolean) => void
8 disabled?: boolean
9 children: ReactNode
10}
12/**
13 * A toggle for drawing an extra curve. The swatch shows the colour the curve
14 * will have before it is turned on, so the button reads as "add this series"
15 * rather than as an anonymous checkbox.
16 */
17export default function SeriesToggle({ color, on, onChange, disabled, children }: Props) {
18 return (
19 <button
20 className={`chip tone ${on ? 'on' : ''}`}
21 style={{ '--tone': color } as CSSProperties}
22 aria-pressed={on}
23 disabled={disabled}
24 onClick={() => onChange(!on)}
25 >
26 <span className="swatch" aria-hidden="true" />
27 {children}
28 </button>
29 )
30}