Dialog

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Dialog } from '@/components/ui/dialog';
5import { Input } from '@/components/ui/input';
6import { Label } from '@/components/ui/label';
7import { Select } from '@/components/ui/select';
8
9export function Default() {
10  return (
11    <Dialog>
12      <Dialog.Trigger asChild>
13        <Button>Invite teammate</Button>
14      </Dialog.Trigger>
15      <Dialog.Content>
16        <Dialog.Header>
17          <Dialog.Title>Invite to Northwind</Dialog.Title>
18          <Dialog.Description>
19            They get an email with a join link that expires in 7 days. Each extra seat is billed at
20            $12 per month.
21          </Dialog.Description>
22        </Dialog.Header>
23        <div className="grid gap-4 py-2">
24          <Input
25            id="invite-email"
26            type="email"
27            label="Work email"
28            placeholder="teammate@northwind.io"
29            description="Only addresses on northwind.io skip manual approval."
30          />
31          <div className="grid gap-1.5">
32            <Label htmlFor="invite-role">Role</Label>
33            <Select defaultValue="developer">
34              <Select.Trigger id="invite-role" />
35              <Select.Content>
36                <Select.Item value="admin">Admin, full access including billing</Select.Item>
37                <Select.Item value="developer">Developer, can deploy and read logs</Select.Item>
38                <Select.Item value="viewer">Viewer, read only</Select.Item>
39              </Select.Content>
40            </Select>
41          </div>
42        </div>
43        <Dialog.Footer>
44          <Dialog.Close asChild>
45            <Button variant="outline">Cancel</Button>
46          </Dialog.Close>
47          <Dialog.Close asChild>
48            <Button>Send invite</Button>
49          </Dialog.Close>
50        </Dialog.Footer>
51      </Dialog.Content>
52    </Dialog>
53  );
54}

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Dialog } from '@/components/ui/dialog';
5
6export function Alert() {
7  return (
8    <Dialog>
9      <Dialog.Trigger asChild>
10        <Button variant="destructive">Revoke key</Button>
11      </Dialog.Trigger>
12      <Dialog.Content>
13        <Dialog.Header>
14          <Dialog.Title>Revoke ci-deploy-prod?</Dialog.Title>
15          <Dialog.Description>
16            Every request signed with this key starts returning 401 right away. Two services used it
17            in the last hour, so update your pipeline secrets before you revoke.
18          </Dialog.Description>
19        </Dialog.Header>
20        <div className="border-destructive-border bg-destructive-surface text-destructive-text rounded-md border p-3 text-xs">
21          <p className="font-mono">sk_live_9f2c...4ab1</p>
22          <p className="mt-1">Created Mar 14, last used 42 minutes ago by deploy-runner</p>
23        </div>
24        <Dialog.Footer>
25          <Dialog.Close asChild>
26            <Button variant="outline">Keep key</Button>
27          </Dialog.Close>
28          <Dialog.Close asChild>
29            <Button variant="destructive">Revoke key</Button>
30          </Dialog.Close>
31        </Dialog.Footer>
32      </Dialog.Content>
33    </Dialog>
34  );
35}