Notify Templates

import { Switch, Select, Checkbox, Notification } from '@cleen/cleen-components';
import { useNotifySettings } from '@/hooks/useNotifySettings';

export function NotificationSettings() {
  const { groups, toggle, setChannel } = useNotifySettings();

  return (
    <div className="notify-settings">
      {groups.map((g) => (
        <section key={g.id}>
          <h2>{g.name}</h2>
          {g.types.map((t) => (
            <div key={t.id} className="notify-row">
              <Switch checked={t.enabled} onChange={(v) => toggle(t.id, v)}>{t.label}</Switch>
              <Select
                value={t.channel}
                onChange={(v) => setChannel(t.id, v)}
                options={[
                  { value: 'email', label: 'Email' },
                  { value: 'push',  label: 'Push' },
                  { value: 'sms',   label: 'SMS' },
                ]}
              />
            </div>
          ))}
        </section>
      ))}
      <Notification tone="info">Changes save automatically.</Notification>
    </div>
  );
}