Custom Library

Una librería llena de componentes custom

Instalación

Para instalar la librería, utiliza npm:

Uso

Uso Básico

Este es un ejemplo de cómo usar CustomModal en un componente.

Personalización del Modal

Puedes personalizar el modal usando las propiedades proporcionadas:

<CustomModal
  isOpen={isModalOpen}
  onClose={handleCloseModal}
  title="Título Personalizado"
  content="Este es un modal completamente personalizable."
  iconType="success"
  buttonTextConfirm="Aceptar"
  buttonTextCancel="Cancelar"
  buttonColorConfirm="BLACK"
  buttonColorCancel="WHITE"
  onConfirm={() => console.log('Confirmado')}
  onCancel={handleCloseModal}
  showConfirmButton={true}
  showCancelButton={true}
/>

Uso del UseButton

<UseButton
  text="Guardar"
  color="GREEN"
  onButtonClick={() => console.log('Guardado')}
  disabled={false}
/>

Tabla de propiedades

CustomModal:

| Propiedad                 | Tipo      | Valor por Defecto       | Descripción                                              |
|---------------------------|-----------|-------------------------|----------------------------------------------------------|
| `isOpen`                  | Boolean   | `false`                 | Controla si el modal está abierto o cerrado.             |
| `onClose`                 | Function  | `null`                  | Función llamada al cerrar el modal.                      |
| `title`                   | String    | `''`                    | Título del modal.                                        |
| `content`                 | String    | `''`                    | Contenido del modal.                                     |
| `onConfirm`               | Function  | `null`                  | Función llamada al confirmar la acción del modal.        |
| `onCancel`                | Function  | `null`                  | Función llamada al cancelar la acción del modal.         |
| `disabled`                | Boolean   | `false`                 | Deshabilita los botones de acción.                       |
| `iconType`                | String    | `'info'`                | Tipo de ícono a mostrar (`'warning'`, `'success'`, `'error'`, `'info'`). |
| `iconSize`                | Object    | `{ width: 50, height: 50 }` | Tamaño del ícono. |
| `buttonTextConfirm`       | String    | `'Confirmar'`           | Texto del botón de confirmar.                            |
| `buttonTextCancel`        | String    | `'Cancelar'`            | Texto del botón de cancelar.                             |
| `buttonColorConfirm`      | String    | `'BLACK'`               | Color del botón de confirmar.                            |
| `buttonTextColorConfirm`  | String    | `'#FFFFFF'`             | Color del texto del botón de confirmar.                  |
| `buttonBorderColorConfirm` | String  | `'#1D1A1A'`            | Color del borde del botón de confirmar.                  |
| `buttonColorCancel`       | String    | `'WHITE'`               | Color del botón de cancelar.                             |
| `buttonTextColorCancel`   | String    | `'#636D7C'`             | Color del texto del botón de cancelar.                   |
| `buttonBorderColorCancel` | String    | `'#636D7C'`             | Color del borde del botón de cancelar.                   |
| `showCancelButton`        | Boolean   | `true`                  | Muestra el botón de cancelar.                            |
| `showConfirmButton`       | Boolean   | `true`                  | Muestra el botón de confirmar.                           |

CSS

Puedes agregar estilos adicionales para la animación y la apariencia del modal.

CustomModal.css

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 100%;
}

.modal-icon-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.modal-ellipse {
  position: absolute;
  width: 80px;
  height: 80px;
}

.modal-icon {
  position: relative;
  z-index: 1;
}

.modal-title {
  font-size: 24px;
  margin: 0 0 10px;
  text-align: center;
}

.modal-content {
  margin-bottom: 20px;
  text-align: center;
}

.modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}