yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import {
2 Dialog,
3 DialogPanel,
4 DialogTitle,
5 Transition,
6 TransitionChild
7} from "@headlessui/react";
8import type { ReactNode } from "react";
9import { Fragment, memo } from "react";
10import { Button } from "@/components/Shared/UI";
11import { H4 } from "./Typography";
12
13interface AlertProps {
14 cancelText?: string;
15 children?: ReactNode;
16 confirmText?: string;
17 description: ReactNode;
18 isPerformingAction?: boolean;
19 onClose: () => void;
20 onConfirm?: () => void;
21 show: boolean;
22 title: ReactNode;
23}
24
25const Alert = ({
26 cancelText = "Cancel",
27 children,
28 confirmText,
29 description,
30 isPerformingAction = false,
31 onClose,
32 onConfirm,
33 show,
34 title
35}: AlertProps) => {
36 return (
37 <Transition as={Fragment} show={show}>
38 <Dialog
39 as="div"
40 className="fixed inset-0 z-10 overflow-y-auto"
41 onClose={() => onClose?.()}
42 >
43 <div className="flex min-h-screen items-center justify-center p-4 text-center sm:block sm:p-0">
44 <span className="hidden sm:inline-block sm:h-screen sm:align-middle" />
45 <div
46 aria-hidden="true"
47 className="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/80"
48 />
49 <TransitionChild
50 as={Fragment}
51 enter="ease-out duration-100"
52 enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
53 enterTo="opacity-100 translate-y-0 sm:scale-100"
54 leave="ease-in duration-100"
55 leaveFrom="opacity-100 translate-y-0 sm:scale-100"
56 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
57 >
58 <DialogPanel className="inline-block w-full scale-100 space-y-6 rounded-xl bg-white p-5 text-left align-bottom shadow-xl transition-all sm:max-w-sm sm:align-middle dark:bg-gray-800">
59 <DialogTitle className="space-y-2">
60 <H4>{title}</H4>
61 <p>{description}</p>
62 </DialogTitle>
63 <div>{children}</div>
64 <div className="space-y-3">
65 {onConfirm ? (
66 <Button
67 className="w-full"
68 disabled={isPerformingAction}
69 loading={isPerformingAction}
70 onClick={() => onConfirm()}
71 size="lg"
72 >
73 {confirmText}
74 </Button>
75 ) : null}
76 <Button
77 className="w-full"
78 disabled={isPerformingAction}
79 onClick={onClose}
80 outline
81 size="lg"
82 >
83 {cancelText}
84 </Button>
85 </div>
86 </DialogPanel>
87 </TransitionChild>
88 </div>
89 </Dialog>
90 </Transition>
91 );
92};
93
94export default memo(Alert);