bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a ne model and card design across pages

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-08-31 10:46:13 +02:00
parent ab21149acf
commit a8b73e22ea
14 changed files with 1865 additions and 820 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/ui/Modal/Modal.tsx
View File

@@ -116,38 +116,38 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({
if (!isOpen) return null;
const sizeClasses = {
xs: 'max-w-xs',
sm: 'max-w-sm',
md: 'max-w-md',
lg: 'max-w-lg',
xl: 'max-w-xl',
'2xl': 'max-w-2xl',
full: 'max-w-full',
xs: 'max-w-xs w-full',
sm: 'max-w-sm w-full',
md: 'max-w-md w-full',
lg: 'max-w-lg w-full max-h-[90vh] overflow-y-auto',
xl: 'max-w-xl w-full max-h-[90vh] overflow-y-auto',
'2xl': 'max-w-2xl w-full max-h-[90vh] overflow-y-auto',
full: 'max-w-full w-full max-h-[90vh] overflow-y-auto',
};
const variantClasses = {
default: {
overlay: 'fixed inset-0 bg-modal-backdrop backdrop-blur-sm z-50 flex items-center justify-center p-4',
overlay: 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4',
content: 'w-full transform transition-all duration-300 ease-out scale-100 opacity-100',
},
centered: {
overlay: 'fixed inset-0 bg-modal-backdrop backdrop-blur-sm z-50 flex items-center justify-center p-4',
overlay: 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4',
content: 'w-full transform transition-all duration-300 ease-out scale-100 opacity-100',
},
'drawer-left': {
overlay: 'fixed inset-0 bg-modal-backdrop backdrop-blur-sm z-50 flex justify-start',
overlay: 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex justify-start',
content: 'h-full w-full max-w-md transform transition-all duration-300 ease-out translate-x-0',
},
'drawer-right': {
overlay: 'fixed inset-0 bg-modal-backdrop backdrop-blur-sm z-50 flex justify-end',
overlay: 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex justify-end',
content: 'h-full w-full max-w-md transform transition-all duration-300 ease-out translate-x-0',
},
'drawer-top': {
overlay: 'fixed inset-0 bg-modal-backdrop backdrop-blur-sm z-50 flex flex-col justify-start',
overlay: 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex flex-col justify-start',
content: 'w-full transform transition-all duration-300 ease-out translate-y-0',
},
'drawer-bottom': {
overlay: 'fixed inset-0 bg-modal-backdrop backdrop-blur-sm z-50 flex flex-col justify-end',
overlay: 'fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex flex-col justify-end',
content: 'w-full transform transition-all duration-300 ease-out translate-y-0',
},
};
@@ -159,7 +159,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({
);
const contentClasses = clsx(
'relative bg-modal-bg border border-modal-border rounded-lg shadow-xl',
'relative bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg shadow-xl',
'animate-in zoom-in-95 duration-200',
variantClasses[variant].content,
sizeClasses[size],
@@ -192,7 +192,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(({
{showCloseButton && (
<button
type="button"
className="absolute top-4 right-4 text-text-tertiary hover:text-text-primary transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-color-primary/20 rounded-md p-1"
className="absolute top-4 right-4 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 rounded-md p-1"
onClick={onClose}
aria-label="Cerrar modal"
>
@@ -225,7 +225,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(({
...props
}, ref) => {
const classes = clsx(
'px-6 py-4 border-b border-border-primary',
'px-6 py-4 border-b border-[var(--border-primary)]',
className
);
@@ -240,13 +240,13 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(({
{title && (
<h2
id="modal-title"
className="text-lg font-semibold text-text-primary"
className="text-lg font-semibold text-[var(--text-primary)]"
>
{title}
</h2>
)}
{subtitle && (
<p className="mt-1 text-sm text-text-secondary">
<p className="mt-1 text-sm text-[var(--text-secondary)]">
{subtitle}
</p>
)}
@@ -255,7 +255,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(({
{showCloseButton && onClose && (
<button
type="button"
className="ml-4 text-text-tertiary hover:text-text-primary transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-color-primary/20 rounded-md p-1"
className="ml-4 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 rounded-md p-1"
onClick={onClose}
aria-label="Cerrar modal"
>
@@ -333,7 +333,7 @@ const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(({
};
const classes = clsx(
'flex items-center gap-3 border-t border-border-primary',
'flex items-center gap-3 border-t border-[var(--border-primary)]',
paddingClasses[padding],
justifyClasses[justify],
className