Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x | import { useState } from 'react';
// Utils
import { combineClasses } from '@shared/utils';
// Components
import { Button } from '@/components/common/Button';
import { CustomDialog } from '@shared/ui';
// Icons
import DangerIcon from '@shared/icons/DangerIcon';
interface ForceLogoutDialogProps {
open: boolean;
message: string;
onClose: () => Promise<void>;
}
export const ForceLogoutDialog = ({
open,
message,
onClose,
}: ForceLogoutDialogProps) => {
const [isClosing, setIsClosing] = useState(false);
const handleClose = async () => {
setIsClosing(true);
// Wait for the user to be logged out
await onClose();
setIsClosing(false);
};
return (
<CustomDialog
open={open}
onOpenChange={handleClose}
className={combineClasses(
'sm:max-w-md active:ring-0',
'focus:ring-0 focus-visible:ring-0 focus-within:ring-0',
)}
titleClassName="text-xl font-semibold text-gray-900"
>
<div className="flex flex-col items-center space-y-6 py-2">
{/* Icon */}
<div
className={combineClasses(
'flex-center rounded-full',
'size-16 bg-red-100',
)}
>
<DangerIcon className="size-8 text-destructive" />
</div>
{/* Message */}
<div className="text-center space-y-2">
<p className="text-gray-600 text-sm leading-relaxed">{message}</p>
</div>
{/* Button */}
<Button
aria-label="Close and logout"
isLoading={isClosing}
className={combineClasses(
'w-full bg-red-600 hover:bg-red-700 rounded-md min-h-[48px]',
'text-white font-medium py-2.5',
'transition-colors focus:outline-none focus:ring-0',
)}
onClick={handleClose}
>
Continue
</Button>
</div>
</CustomDialog>
);
};
|