Tabla de Contenidos

• Instalación
• Uso
• Componentes
• Contribuir
• Licencia

Instalación

Para instalar la librería, puedes usar npm o yarn:

npm install calvos-ui

ó

yarn add calvos-ui

Uso

Para utilizar los componentes de Calvos UI en tu proyecto, primero importa el componente que desees:

import { MiComponente } from 'calvos-ui';

Luego, puedes usarlo en tu JSX o TSX

<MiComponente prop1="valor" />

Componentes

Dashboard Card

DashboardCard es un componente de React que crea una tarjeta interactiva para un dashboard. Está diseñado para mostrar información resumida y proporcionar navegación a otras partes de la aplicación o a enlaces externos.

Características

• Diseño atractivo con un icono personalizable y fondo de color.
• Título y descripción para cada tarjeta.
• Soporte para etiquetas opcionales con icono y texto.
• Navegación interna usando React Router.
• Apertura de enlaces externos en una nueva pestaña.

Dependencias

• React
• prop-types
• antd (Ant Design)
• react-router-dom

Propiedades

| Propiedad | Tipo | Requerido | Descripción | |-------------|--------|-----------|----------------------------------------------------------| | icon | node | Sí | Icono a mostrar en la parte superior de la tarjeta | | color | string | Sí | Color de fondo para el área del icono | | title | string | Sí | Título de la tarjeta | | description | string | Sí | Descripción breve de la tarjeta | | path | string | Sí | Ruta de navegación o URL externa | | tag | object | No | Objeto con propiedades para la etiqueta (opcional) |

Propiedades del tag (opcional)

| Propiedad | Tipo | Descripción | |-----------|--------|---------------------------| | color | string | Color de la etiqueta | | icon | node | Icono para la etiqueta | | text | string | Texto de la etiqueta |

Uso

import DashboardCard from './DashboardCard';

<DashboardCard
  icon={<YourIcon />}
  color="#f0f0f0"
  title="Título de la Tarjeta"
  description="Descripción breve de la tarjeta."
  path="/ruta-interna"
  tag={{
    color: "blue",
    icon: <TagIcon />,
    text: "Etiqueta"
  }}
/>