after-effects-plugin/plainly-plugin/src/ui/components/common/ConfirmationDialog.tsx at d6aeb1f4367b5fb6a20c1d39dcf0b1eb0033e5f7 · plainly-videos/after-effects-plugin · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import {
  Dialog,
  DialogBackdrop,
  DialogPanel,
  DialogTitle,
} from '@headlessui/react';

import { State, useGlobalState } from '@src/ui/state/store';
import classNames from 'classnames';
import { TriangleAlertIcon } from 'lucide-react';
import { Description } from '../typography';
import { Button, ExternalLink } from '.';

export function ConfirmationDialog({
  title,
  description,
  buttonText,
  open,
  setOpen,
  action,
  readMoreLink,
}: {
  title: string;
  description?: string;
  buttonText: string;
  open: boolean;
  setOpen: (open: boolean) => void;
  action: () => void;
  readMoreLink?: string;
}) {
  const [settings] = useGlobalState(State.SETTINGS);
  const sidebarOpen = settings.sidebarOpen;

  return (
    <Dialog open={open} onClose={setOpen} className="relative">
      <DialogBackdrop
        transition
        className="fixed inset-0 z-20 backdrop-blur-md transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
      />

      <div className="fixed inset-0 z-30 w-screen overflow-y-auto">
        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
          <DialogPanel
            transition
            className={classNames(
              'relative transform overflow-hidden rounded-lg bg-[rgb(29,29,30)] px-4 pb-4 pt-5 text-left shadow-xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95 border border-white/10',
              sidebarOpen
                ? 'ml-[3.75rem] xs:ml-[var(--sidebar-width)]'
                : 'ml-[3.75rem]',
            )}
          >
            <div className="sm:flex sm:items-start">
              <div className="mx-auto flex size-10 shrink-0 items-center justify-center sm:mx-0 sm:size-8">
                <TriangleAlertIcon
                  aria-hidden="true"
                  className="size-6 text-red-400"
                />
              </div>
              <div className="mt-2 text-center sm:ml-4 sm:mt-0 sm:text-left">
                <DialogTitle
                  as="h3"
                  className="text-sm font-semibold text-white"
                >
                  {title}
                </DialogTitle>
                {description && (
                  <div className="mt-1">
                    <Description>{description}</Description>
                  </div>
                )}
                {readMoreLink && (
                  <div className="mt-1 text-xs text-gray-400">
                    <p>
                      You can read more about this{' '}
                      <ExternalLink to={readMoreLink} text="here" />.
                    </p>
                  </div>
                )}
              </div>
            </div>
            <div className="mt-4 sm:mt-3 sm:flex sm:flex-row-reverse">
              <Button
                type="button"
                onClick={() => {
                  action();
                  setOpen(false);
                }}
                className="inline-flex w-full sm:w-auto justify-center sm:ml-2"
              >
                {buttonText}
              </Button>
              <Button
                type="button"
                onClick={() => setOpen(false)}
                secondary
                className="inline-flex mt-2 sm:mt-0 w-full sm:w-auto justify-center"
              >
                Cancel
              </Button>
            </div>
          </DialogPanel>
        </div>
      </div>
    </Dialog>
  );
}