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"; "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 { export interface ModalProps {
isOpen: boolean; isOpen: boolean;
onClose: () => void; onClose: () => void;
title?: React.ReactNode; title?: React.ReactNode;
description?: React.ReactNode; description?: React.ReactNode;
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'; size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
children: React.ReactNode; children: React.ReactNode;
footer?: React.ReactNode; footer?: React.ReactNode;
closeOnOverlayClick?: boolean; closeOnOverlayClick?: boolean;
@@ -16,12 +18,12 @@ export interface ModalProps {
} }
const sizeStyles = { const sizeStyles = {
sm: 'max-w-md', sm: "max-w-md",
md: 'max-w-lg', md: "max-w-lg",
lg: 'max-w-2xl', lg: "max-w-2xl",
xl: 'max-w-4xl', xl: "max-w-4xl",
'2xl': 'max-w-6xl', "2xl": "max-w-6xl",
full: 'max-w-[95vw] h-[90vh]', full: "max-w-[95vw] h-[90vh]",
}; };
export const Modal: React.FC<ModalProps> = ({ export const Modal: React.FC<ModalProps> = ({
@@ -29,101 +31,74 @@ export const Modal: React.FC<ModalProps> = ({
onClose, onClose,
title, title,
description, description,
size = 'md', size = "md",
children, children,
footer, footer,
closeOnOverlayClick = true, closeOnOverlayClick = true,
showCloseButton = 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 ( return (
<div <HeroModal>
role="dialog" <HeroModal.Backdrop
aria-modal="true" isOpen={isOpen}
className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 overflow-y-auto" isDismissable={closeOnOverlayClick}
> onOpenChange={(open) => {
{/* Backdrop */} if (!open) {
<div onClose();
onClick={() => { }
if (closeOnOverlayClick) 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 */} {/* Header */}
<div {(title || description || showCloseButton) && (
className={` <HeroModal.Header className="flex items-start justify-between p-6 pb-4 border-b border-slate-100 dark:border-slate-800/80">
relative w-full rounded-3xl overflow-hidden shadow-2xl z-10 <div className="space-y-1 pr-6">
bg-white text-slate-900 border border-slate-200 {title && (
dark:bg-slate-900/95 dark:text-slate-100 dark:border-slate-800 <HeroModal.Heading className="text-xl font-bold text-slate-900 dark:text-white tracking-tight">
transition-all transform animate-scaleUp {title}
${sizeStyles[size]} </HeroModal.Heading>
${className} )}
`} {description && (
> <p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400">{description}</p>
{/* Header */} )}
{(title || description || showCloseButton) && ( </div>
<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>
{showCloseButton && ( {showCloseButton && (
<button <HeroModal.CloseTrigger
type="button" 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"
onClick={onClose} onPress={onClose}
aria-label="Cerrar modal" 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" />
> </HeroModal.CloseTrigger>
<FiX className="text-lg" /> )}
</button> </HeroModal.Header>
)} )}
</div>
)}
{/* Body Content */} {/* Body Content */}
<div className="p-6 overflow-y-auto max-h-[calc(85vh-160px)]"> <HeroModal.Body className="p-6 overflow-y-auto max-h-[calc(85vh-160px)]">{children}</HeroModal.Body>
{children}
</div>
{/* Footer */} {/* Footer */}
{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"> <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} {footer}
</div> </HeroModal.Footer>
)} )}
</div> </HeroModal.Dialog>
</div> </HeroModal.Container>
</HeroModal.Backdrop>
</HeroModal>
); );
}; };