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 | 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | // Utils
import { combineClasses } from '@shared/utils';
// Components
import { Button } from '@/components/common/Button';
import { CustomDialog } from '@shared/ui';
// Icons
import { LightBulbIcon } from '../icons/reacts';
interface ChangeTimeRangeDialogProps {
open: boolean;
message: string;
onClose?: () => void;
}
export const ChangeTimeRangeDialog = ({
open,
message,
onClose,
}: ChangeTimeRangeDialogProps) => {
return (
<CustomDialog
open={open}
onOpenChange={onClose}
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-secondary-600',
)}
>
<LightBulbIcon className="size-8" />
</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"
className={combineClasses(
'w-full bg-secondary-150 hover:bg-primary rounded-md min-h-[48px]',
'text-white font-medium py-2.5',
'transition-colors focus:outline-none focus:ring-0',
)}
onClick={onClose}
>
Select Another Time
</Button>
</div>
</CustomDialog>
);
};
|