Confirm

1'use client';
2
3import { useState } from 'react';
4import { Confirm } from '@/components/ui/confirm';
5
6function TrashIcon({ size = 16 }: { size?: number }) {
7  return (
8    <svg
9      xmlns="http://www.w3.org/2000/svg"
10      width={size}
11      height={size}
12      viewBox="0 0 24 24"
13      fill="none"
14      stroke="currentColor"
15      strokeWidth={1.5}
16      strokeLinecap="round"
17      strokeLinejoin="round"
18      aria-hidden="true"
19    >
20      <path d="M3 6h18" />
21      <path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" />
22      <path d="M19 6l-1 14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1L5 6" />
23      <path d="M10 11v6" />
24      <path d="M14 11v6" />
25    </svg>
26  );
27}
28
29export function Default() {
30  const [result, setResult] = useState<string | null>(null);
31
32  return (
33    <div className="flex w-full max-w-md flex-col items-start gap-3">
34      <Confirm
35        title="Delete project"
36        description="The repository, its deployments and every environment variable go with it. This cannot be undone."
37        icon={<TrashIcon />}
38        variant="destructive"
39        confirmText="Delete project"
40        onConfirm={() =>
41          new Promise<void>((resolve) => {
42            setTimeout(() => {
43              setResult('Deleted.');
44              resolve();
45            }, 900);
46          })
47        }
48        onCancel={() => setResult('Kept it.')}
49      >
50        <Confirm.Trigger className="border-border hover:bg-muted rounded-md border px-3 py-1.5 text-sm transition-colors">
51          Delete project
52        </Confirm.Trigger>
53      </Confirm>
54      {result && <p className="text-muted-foreground text-xs">{result}</p>}
55    </div>
56  );
57}

1'use client';
2
3import { useState } from 'react';
4import { Confirm } from '@/components/ui/confirm';
5
6const PROJECT = 'ignaciofigueroa.dev';
7
8export function WithText() {
9  const [result, setResult] = useState<string | null>(null);
10
11  return (
12    <div className="flex w-full max-w-md flex-col items-start gap-3">
13      <Confirm
14        title={`Transfer ${PROJECT}`}
15        description="Ownership moves to the other team and you lose access to the settings."
16        variant="destructive"
17        confirmText="Transfer"
18        requireText={PROJECT}
19        onConfirm={() => setResult(`${PROJECT} transferred.`)}
20        onCancel={() => setResult('Nothing changed.')}
21      >
22        <Confirm.Trigger className="border-border hover:bg-muted rounded-md border px-3 py-1.5 text-sm transition-colors">
23          Transfer project
24        </Confirm.Trigger>
25      </Confirm>
26      {result && <p className="text-muted-foreground text-xs">{result}</p>}
27    </div>
28  );
29}

1'use client';
2
3import { useState } from 'react';
4import { ConfirmProvider, useConfirm } from '@/components/ui/confirm';
5
6function ArchiveButton() {
7  const confirm = useConfirm();
8  const [status, setStatus] = useState('Three drafts in the archive.');
9
10  const archive = async () => {
11    const ok = await confirm({
12      title: 'Archive the draft?',
13      description: 'It leaves the list but stays searchable.',
14      confirmText: 'Archive',
15    });
16    setStatus(ok ? 'Archived. Four drafts in the archive.' : 'Still in the list.');
17  };
18
19  return (
20    <div className="flex flex-col items-start gap-3">
21      <button
22        type="button"
23        onClick={() => void archive()}
24        className="border-border hover:bg-muted rounded-md border px-3 py-1.5 text-sm transition-colors"
25      >
26        Archive draft
27      </button>
28      <p className="text-muted-foreground text-xs">{status}</p>
29    </div>
30  );
31}
32
33export function Hook() {
34  return (
35    <ConfirmProvider>
36      <div className="w-full max-w-md">
37        <ArchiveButton />
38      </div>
39    </ConfirmProvider>
40  );
41}