# All files / src/components/ui Modal.tsx

100% Statements 4/4
100% Branches 5/5
100% Functions 1/1
100% Lines 3/3

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

    1x

    9x

    8x

     import { type ReactNode } from 'react';

    interface ModalProps {
      open: boolean;
      onClose: () => void;
      title?: string;
      children: ReactNode;
      size?: 'sm' | 'md' | 'lg';
    }

    const sizeClasses: Record<string, string> = {
      sm: 'max-w-sm',
      md: 'max-w-md',
      lg: 'max-w-2xl',
    };

    function Modal({ open, onClose, title, children, size = 'md' }: ModalProps) {
      if (!open) return null;

      return (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
          <div className="fixed inset-0 bg-overlay-backdrop backdrop-blur-md" onClick={onClose} />
          <div className={`relative w-full ${sizeClasses[size]} rounded-modal bg-white dark:bg-gray-50 shadow-modal dark:border dark:border-border p-6 animate-slide-up`}>
            {title && (
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-text-primary">{title}</h3>
                <button
                  onClick={onClose}
                  className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-200 text-text-secondary hover:text-text-primary transition-button"
                >
                  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            )}
            {children}
          </div>
        </div>
      );
    }

    export { Modal };