RynextTechnologies/Academia-Front
6
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): migrar componente Modal a HeroUI

Browse Source
This commit is contained in:
Miguel Ortega committed 2026-09-14 20:08:33 -05:00
1 parent 34e9896e15
commit 0beb12e6ad
1 file changed
+68 -93
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/Modal.tsx
+68 -93
View File
@@ -1,13 +1,15 @@
"use client";
import React, { useEffect } from 'react';
import { FiX } from 'react-icons/fi';
import React from "react";
import { Modal as HeroModal } from "@heroui/react";
import { FiX } from "react-icons/fi";
export interface ModalProps {
isOpen: boolean;
onClose: () => void;
title?: React.ReactNode;
description?: React.ReactNode;
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
children: React.ReactNode;
footer?: React.ReactNode;
closeOnOverlayClick?: boolean;
@@ -16,12 +18,12 @@ export interface ModalProps {
}
const sizeStyles = {
sm: 'max-w-md',
md: 'max-w-lg',
lg: 'max-w-2xl',
xl: 'max-w-4xl',
'2xl': 'max-w-6xl',
full: 'max-w-[95vw] h-[90vh]',
sm: "max-w-md",
md: "max-w-lg",
lg: "max-w-2xl",
xl: "max-w-4xl",
"2xl": "max-w-6xl",
full: "max-w-[95vw] h-[90vh]",
};
export const Modal: React.FC<ModalProps> = ({
@@ -29,101 +31,74 @@ export const Modal: React.FC<ModalProps> = ({
onClose,
title,
description,
size = 'md',
size = "md",
children,
footer,
closeOnOverlayClick = true,
showCloseButton = true,
className = '',
className = "",
}) => {
// ESC key handler and body scroll lock
useEffect(() => {
if (!isOpen) return;
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
const originalOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
window.addEventListener('keydown', handleKeyDown);
return () => {
document.body.style.overflow = originalOverflow;
window.removeEventListener('keydown', handleKeyDown);
};
}, [isOpen, onClose]);
if (!isOpen) return null;
return (
<div
role="dialog"
aria-modal="true"
className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 overflow-y-auto"
>
{/* Backdrop */}
<div
onClick={() => {
if (closeOnOverlayClick) onClose();
<HeroModal>
<HeroModal.Backdrop
isOpen={isOpen}
isDismissable={closeOnOverlayClick}
onOpenChange={(open) => {
if (!open) {
onClose();
}
}}
className="fixed inset-0 bg-slate-950/70 backdrop-blur-md transition-opacity animate-fadeIn"
/>
variant="blur"
className="fixed inset-0 bg-slate-950/70 backdrop-blur-md transition-opacity animate-fadeIn">
<HeroModal.Container placement="center" scroll="inside" size="md" className="p-4 sm:p-6">
<HeroModal.Dialog
aria-modal="true"
className={`
relative w-full rounded-3xl overflow-hidden shadow-2xl z-10 p-0
bg-white text-slate-900 border border-slate-200
dark:bg-slate-900/95 dark:text-slate-100 dark:border-slate-800
transition-all transform animate-scaleUp
${sizeStyles[size]}
${className}
`}>
{/* Modal Dialog Card */}
<div
className={`
relative w-full rounded-3xl overflow-hidden shadow-2xl z-10
bg-white text-slate-900 border border-slate-200
dark:bg-slate-900/95 dark:text-slate-100 dark:border-slate-800
transition-all transform animate-scaleUp
${sizeStyles[size]}
${className}
`}
>
{/* Header */}
{(title || description || showCloseButton) && (
<div className="flex items-start justify-between p-6 pb-4 border-b border-slate-100 dark:border-slate-800/80">
<div className="space-y-1 pr-6">
{title && (
<h2 className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">
{title}
</h2>
)}
{description && (
<p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400">
{description}
</p>
)}
</div>
{/* Header */}
{(title || description || showCloseButton) && (
<HeroModal.Header className="flex items-start justify-between p-6 pb-4 border-b border-slate-100 dark:border-slate-800/80">
<div className="space-y-1 pr-6">
{title && (
<HeroModal.Heading className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">
{title}
</HeroModal.Heading>
)}
{description && (
<p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400">{description}</p>
)}
</div>
{showCloseButton && (
<button
type="button"
onClick={onClose}
aria-label="Cerrar modal"
className="p-2 rounded-xl text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors"
>
<FiX className="text-lg" />
</button>
{showCloseButton && (
<HeroModal.CloseTrigger
className="p-2 rounded-xl text-slate-400 hover:text-slate-700 hover:bg-slate-100 dark:hover:text-slate-200 dark:hover:bg-slate-800 transition-colors"
onPress={onClose}
aria-label="Cerrar modal">
<FiX className="text-lg" />
</HeroModal.CloseTrigger>
)}
</HeroModal.Header>
)}
</div>
)}
{/* Body Content */}
<div className="p-6 overflow-y-auto max-h-[calc(85vh-160px)]">
{children}
</div>
{/* Body Content */}
<HeroModal.Body className="p-6 overflow-y-auto max-h-[calc(85vh-160px)]">{children}</HeroModal.Body>
{/* Footer */}
{footer && (
<div className="p-6 pt-4 border-t border-slate-100 dark:border-slate-800/80 bg-slate-50/50 dark:bg-slate-950/40 flex items-center justify-end gap-3">
{footer}
</div>
)}
</div>
</div>
{/* Footer */}
{footer && (
<HeroModal.Footer className="p-6 pt-4 border-t border-slate-100 dark:border-slate-800/80 bg-slate-50/50 dark:bg-slate-950/40 flex items-center justify-end gap-3">
{footer}
</HeroModal.Footer>
)}
</HeroModal.Dialog>
</HeroModal.Container>
</HeroModal.Backdrop>
</HeroModal>
);
};