Switch

import { Switch } from '@adoptaunabuelo/react-components';

import { ColorV2 } from '@adoptaunabuelo/react-components';

<Switch
  active={isEnabled}
  color={ColorV2.surface.primary}
  onChange={(on) => setIsEnabled(on)}
/>

const [enabled, setEnabled] = useState(false);

<Switch
  active={enabled}
  onChange={(on) => setEnabled(on)}
/>

import { ColorV2 } from '@adoptaunabuelo/react-components';

const [darkMode, setDarkMode] = useState(false);

<Switch
  active={darkMode}
  color={ColorV2.surface.green}
  onChange={(on) => setDarkMode(on)}
/>

import { Text } from '@adoptaunabuelo/react-components';

<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
  <Switch
    active={notifications}
    onChange={setNotifications}
  />
  <Text type="p">Enable notifications</Text>
</div>

import { ColorV2 } from '@adoptaunabuelo/react-components';

const [settings, setSettings] = useState({
  darkMode: false,
  notifications: true,
  autoSave: true
});

<div>
  <div style={{ marginBottom: '16px' }}>
    <Switch
      active={settings.darkMode}
      color={ColorV2.surface.primary}
      onChange={(on) => setSettings({...settings, darkMode: on})}
    />
    <span>Dark Mode</span>
  </div>
  <div style={{ marginBottom: '16px' }}>
    <Switch
      active={settings.notifications}
      onChange={(on) => setSettings({...settings, notifications: on})}
    />
    <span>Notifications</span>
  </div>
</div>