64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import { AiroButton, buttonVariants } from '@workspace/airo-ui/components/AiroButton';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogPortal,
|
|
AlertDialogTitle,
|
|
} from '@workspace/airo-ui/components/alert-dialog';
|
|
import CloseSvg from '@workspace/airo-ui/components/close.svg';
|
|
import { useImperativeHandle, useState } from 'react';
|
|
|
|
// Defining the AlertDialogComponent with internal state and onShow prop
|
|
const AlertDialogComponent = ({
|
|
ref,
|
|
title,
|
|
description,
|
|
cancelText = 'Cancel',
|
|
confirmText = 'Confirm',
|
|
onConfirm,
|
|
}) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
function show() {
|
|
setOpen(true);
|
|
}
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
show,
|
|
}));
|
|
return (
|
|
<AlertDialog open={open} onOpenChange={setOpen}>
|
|
<AlertDialogPortal>
|
|
<AlertDialogContent className={'py-[30px] sm:rounded-[25px]'}>
|
|
<div className={'absolute right-4 top-6'} onClick={() => setOpen(false)}>
|
|
<CloseSvg />
|
|
</div>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle className={'text-[#E22C2E]'}>{title}</AlertDialogTitle>
|
|
<AlertDialogDescription className={'text-base font-light'}>
|
|
{description}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter className={'sm:justify-center'}>
|
|
<AlertDialogAction asChild className={buttonVariants({ variant: 'primary' })}>
|
|
<AiroButton variant={'primary'} onClick={onConfirm}>
|
|
{confirmText}
|
|
</AiroButton>
|
|
</AlertDialogAction>
|
|
<AlertDialogCancel asChild className={buttonVariants({ variant: 'danger' })}>
|
|
<AiroButton variant={'danger'}>{cancelText}</AiroButton>
|
|
</AlertDialogCancel>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialogPortal>
|
|
</AlertDialog>
|
|
);
|
|
};
|
|
|
|
export default AlertDialogComponent;
|