File size: 2,003 Bytes
ec4551b | 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 | import { FC, ReactNode, useEffect, useRef } from 'react';
import { useModals } from '@gitroom/frontend/components/layout/new-modal';
import { deleteDialog } from '@gitroom/react/helpers/delete.dialog';
import { useT } from '@gitroom/react/translation/get.transation.service.client';
export const ModalWrapperComponent: FC<{
title: string;
children: ReactNode;
customClose?: () => void;
ask?: boolean;
}> = ({ title, children, ask, customClose }) => {
const ref = useRef<HTMLDivElement>(null);
const modal = useModals();
const t = useT();
const closeModal = async () => {
if (
ask &&
!(await deleteDialog(
t(
'are_you_sure_you_want_to_close_the_window',
'Are you sure you want to close the window?'
),
t('yes_close', 'Yes, close')
))
) {
return;
}
if (customClose) {
customClose();
return;
}
modal.closeAll();
};
useEffect(() => {
ref?.current?.scrollIntoView({
behavior: 'smooth',
});
}, []);
return (
<>
<div className="relative">
<div className="absolute -top-[30px] left-0" ref={ref} />
</div>
<div
className="p-[32px] flex flex-col text-newTextColor bg-newBgColorInner rounded-[24px]"
>
<div className="flex items-start mb-[24px]">
<div className="flex-1 text-[24px]">{title}</div>
<div className="cursor-pointer" onClick={closeModal}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="21"
height="21"
viewBox="0 0 21 21"
fill="none"
>
<path
d="M16.5 4.5L4.5 16.5M4.5 4.5L16.5 16.5"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
<div>{children}</div>
</div>
</>
);
};
|