Settings Row

1'use client';
2
3import { useState } from 'react';
4import { Badge } from '@/components/ui/badge';
5import { Button } from '@/components/ui/button';
6import { SettingsRow } from '@/components/ui/settings-row';
7
8const FREQUENCIES = [
9  { value: 'instant', label: 'Instantly' },
10  { value: 'hourly', label: 'Hourly' },
11  { value: 'daily', label: 'Daily digest' },
12];
13
14export function Default() {
15  const [email, setEmail] = useState(true);
16  const [frequency, setFrequency] = useState('daily');
17  const [replyTo, setReplyTo] = useState('nacho@example.com');
18
19  return (
20    <div className="w-full max-w-xl">
21      <SettingsRow.Section
22        title="Notifications"
23        description="How and when NachUI reaches you."
24        footer={
25          <Button size="sm" type="button">
26            Save changes
27          </Button>
28        }
29      >
30        <SettingsRow label="Email alerts" description="One email for every event on your account.">
31          <SettingsRow.Switch checked={email} onCheckedChange={setEmail} />
32        </SettingsRow>
33        <SettingsRow
34          label="Frequency"
35          description="How often the alerts are bundled."
36          badge={<Badge variant="secondary">Beta</Badge>}
37          disabled={!email}
38        >
39          <SettingsRow.Select
40            options={FREQUENCIES}
41            value={frequency}
42            onValueChange={setFrequency}
43          />
44        </SettingsRow>
45        <SettingsRow label="Reply-to address" description="Shown on every email we send.">
46          <SettingsRow.Input
47            type="email"
48            value={replyTo}
49            onChange={(event) => setReplyTo(event.target.value)}
50          />
51        </SettingsRow>
52      </SettingsRow.Section>
53    </div>
54  );
55}

1'use client';
2
3import { useState } from 'react';
4import { SettingsRow } from '@/components/ui/settings-row';
5
6export function Danger() {
7  const [deleted, setDeleted] = useState(false);
8
9  return (
10    <div className="w-full max-w-xl">
11      <SettingsRow.Section
12        title="Danger zone"
13        description="Keys and actions that are hard to undo."
14        className="border-destructive-border"
15      >
16        <SettingsRow label="API key" description="Use it from the server only. Rotates on demand.">
17          <SettingsRow.Value value="sk_live_4f2a…9c1e" copy />
18        </SettingsRow>
19        <SettingsRow label="Rotate key" description="The current key stops working right away.">
20          <SettingsRow.Action>Rotate</SettingsRow.Action>
21        </SettingsRow>
22        <SettingsRow
23          label="Delete account"
24          description="Removes the workspace, its keys and every component synced to it."
25        >
26          <SettingsRow.Action variant="destructive" onClick={() => setDeleted(true)}>
27            {deleted ? 'Scheduled' : 'Delete account'}
28          </SettingsRow.Action>
29        </SettingsRow>
30      </SettingsRow.Section>
31    </div>
32  );
33}