Switch

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

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

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
      <Switch
        active={enabled}
        onChange={(on) => setEnabled(on)}
      />
      <span>Enable notifications</span>
    </div>
  );
}

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

function CustomColorSwitch() {
  const [active, setActive] = useState(true);

  return (
    <Switch
      active={active}
      color="#FF6B6B"
      onChange={(on) => setActive(on)}
    />
  );
}

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

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

  const updateSetting = (key, value) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span>Notifications</span>
        <Switch
          active={settings.notifications}
          onChange={(on) => updateSetting('notifications', on)}
        />
      </div>
      
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span>Dark Mode</span>
        <Switch
          active={settings.darkMode}
          onChange={(on) => updateSetting('darkMode', on)}
        />
      </div>
      
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span>Auto Save</span>
        <Switch
          active={settings.autoSave}
          onChange={(on) => updateSetting('autoSave', on)}
        />
      </div>
    </div>
  );
}