Switch

'use client'

import * as React from 'react'
import { Switch } from '@fairgarden-private/design/components/Switch'
import styles from './states.module.css'

/**
 * A settings list of rows (on, off, disabled, and a remote save that shows
 * "Saving…"), then an inline switch.
 */
export function SwitchStates() {
  const [alerts, setAlerts] = React.useState(true)
  const [saving, setSaving] = React.useState(false)

  const save = (next: boolean) => {
    setSaving(true)
    window.setTimeout(() => {
      setAlerts(next)
      setSaving(false)
    }, 1200)
  }

  return (
    <div className={styles.stack}>
      <div>
        <Switch
          checked={alerts}
          onCheckedChange={save}
          aria-busy={saving}
          description="Applies at once; saving takes a moment."
        >
          Email Alerts
        </Switch>
        <Switch>Trail Closures</Switch>
        <Switch disabled>Text Messages</Switch>
        <Switch disabled defaultChecked>
          Member Mail
        </Switch>
      </div>
      <Switch kind="inline" defaultChecked>
        Show Elevation
      </Switch>
    </div>
  )
}

import { Switch } from '@fairgarden-private/design/components/Switch'
import styles from './color.module.css'

/**
 * `secondary` drives the on track and thumb through --role-select;
 * `primary` drives the off track, thumb ring, label and state word.
 */
export function SwitchColor() {
  return (
    <div className={styles.grid}>
      <Switch kind="inline" defaultChecked>
        Scope Colors
      </Switch>
      <Switch kind="inline" defaultChecked secondary="indigo">
        Secondary Indigo
      </Switch>
      <Switch kind="inline" primary="plum">
        Primary Plum
      </Switch>
    </div>
  )
}

import { Switch } from '@fairgarden-private/design/components/Switch'
import { PresetGround } from '@/components/PresetGround'
import styles from './grounds.module.css'

const presets = ['paper', 'forest'] as const

/** On is green on paper and the inverse pair on forest; position, thumb shape and edge weight carry it on both. */
export function SwitchGrounds() {
  return (
    <div className={styles.row}>
      {presets.map((preset) => (
        <PresetGround key={preset} preset={preset} className={styles.face}>
          <span className={styles.name}>{preset}</span>
          <div>
            <Switch defaultChecked>Map Labels</Switch>
            <Switch>Contour Lines</Switch>
            <Switch disabled>Satellite View</Switch>
          </div>
        </PresetGround>
      ))}
    </div>
  )
}