learnhouse/apps/web/components/StyledElements/ConfirmationModal/ConfirmationModal.tsx

'use client';
import React from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import { styled, keyframes } from '@stitches/react';
import { blackA, } from '@radix-ui/colors';
import { AlertTriangle, Info } from 'lucide-react';

type ModalParams = {
    confirmationMessage: string;
    confirmationButtonText: string;
    dialogTitle: string;
    functionToExecute: any;
    dialogTrigger?: React.ReactNode;
    status?: "warning" | "info";
};

const ConfirmationModal = (params: ModalParams) => {
    const [isDialogOpen, setIsDialogOpen] = React.useState(false);
    const warningColors = 'bg-red-100 text-red-600'
    const infoColors = 'bg-blue-100 text-blue-600'
    const warningButtonColors = 'text-white bg-red-500 hover:bg-red-600'
    const infoButtonColors = 'text-white bg-blue-500 hover:bg-blue-600'


    const onOpenChange = React.useCallback(
        (open: any) => {
            setIsDialogOpen(open);
        },
        [setIsDialogOpen]
    );

    return (
        <Dialog.Root open={isDialogOpen} onOpenChange={onOpenChange}>
            {params.dialogTrigger ? (
                <Dialog.Trigger asChild >
                    {params.dialogTrigger}
                </Dialog.Trigger>
            ) : null}

            <Dialog.Portal>
                <DialogOverlay />
                <DialogContent >
                    <div className='h-26 flex space-x-4 tracking-tight'>
                        <div className={`icon p-6 rounded-xl flex items-center align-content-center ${params.status === 'warning' ? warningColors : infoColors}`}>
                            {params.status === 'warning' ? <AlertTriangle size={35} /> : <Info size={35} />}
                        </div>
                        <div className="text pt-1 space-x-0 w-auto flex-grow">
                            <div className="text-xl font-bold text-black ">
                                {params.dialogTitle}
                            </div>
                            <div className="text-md text-gray-500 w-60 leading-tight">
                                {params.confirmationMessage}
                            </div>
                            <div className="flex flex-row-reverse pt-2">
                                <div className={`rounded-md text-sm px-3 py-2 font-bold flex justify-center items-center hover:cursor-pointer ${params.status === 'warning' ? warningButtonColors : infoButtonColors}
                                hover:shadow-lg transition duration-300 ease-in-out
                                `}
                                    onClick={() => { params.functionToExecute(); setIsDialogOpen(false) }}>
                                    {params.confirmationButtonText}
                                </div>
                            </div>
                        </div>
                    </div>
                </DialogContent>
            </Dialog.Portal>
        </Dialog.Root>
    )
};

const overlayShow = keyframes({
    '0%': { opacity: 0 },
    '100%': { opacity: 1 },
});

const overlayClose = keyframes({
    '0%': { opacity: 1 },
    '100%': { opacity: 0 },
});

const contentShow = keyframes({
    '0%': { opacity: 0, transform: 'translate(-50%, -50%) scale(.96)' },
    '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
});

const contentClose = keyframes({
    '0%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
    '100%': { opacity: 0, transform: 'translate(-50%, -52%) scale(.96)' },
});

const DialogOverlay = styled(Dialog.Overlay, {
    backgroundColor: blackA.blackA9,
    position: 'fixed',
    zIndex: 500,
    inset: 0,
    animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
    '&[data-state="closed"]': {
        animation: `${overlayClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
    },
});

const DialogContent = styled(Dialog.Content, {

    backgroundColor: 'white',
    borderRadius: 18,
    zIndex: 501,
    boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
    position: 'fixed',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 'auto',
    minWidth: '500px',
    overflow: 'hidden',
    height: 'auto',
    maxHeight: '85vh',
    maxWidth: '600px',
    padding: 11,
    animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
    '&:focus': { outline: 'none' },

    '&[data-state="closed"]': {
        animation: `${contentClose} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
    },
    transition: "max-height 0.3s ease-out",
});


export default ConfirmationModal;