Toggle switch

import { useState } from 'react';
import { Switch } from '@base-ui/react/switch';

const SETTINGS = [
  { id: 'mentions', label: 'Mentions', hint: 'When someone @mentions you' },
  { id: 'comments', label: 'Comments', hint: 'Replies on files you own' },
  { id: 'summary', label: 'Weekly summary', hint: 'Every Monday at 9 AM' }
];

type Props = { onChange: (id: string, on: boolean) => Promise<void> };

export function NotificationSettings({ onChange }: Props) {
  const [enabled, setEnabled] = useState<Record<string, boolean>>({
    mentions: true
  });

  function toggle(id: string, on: boolean) {
    // Optimistic: flip right away, and flip back if saving fails.
    setEnabled((current) => ({ ...current, [id]: on }));
    onChange(id, on).catch(() =>
      setEnabled((current) => ({ ...current, [id]: !on }))
    );
  }

  return (
    <ul className='w-96 divide-y rounded-xl border'>
      {SETTINGS.map(({ id, label, hint }) => (
        <li key={id}>
          {/* The wrapping label makes the whole row toggle the switch. */}
          <label className='flex cursor-pointer items-center justify-between gap-4 px-4 py-3'>
            <span>
              <span className='block text-sm font-medium'>{label}</span>
              <span className='text-sm text-muted-foreground'>{hint}</span>
            </span>
            <Switch.Root
              checked={enabled[id] ?? false}
              onCheckedChange={(on) => toggle(id, on)}
              className='flex h-6 w-11 shrink-0 rounded-full bg-muted-foreground/30 p-0.5 transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-checked:bg-blue-600'
            >
              {/* A curve that overshoots slightly gives the knob a springy settle. */}
              <Switch.Thumb className='size-5 rounded-full bg-white shadow-sm transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] data-checked:translate-x-5 motion-reduce:transition-none' />
            </Switch.Root>
          </label>
        </li>
      ))}
    </ul>
  );
}