Saltar al contenido principal

Guía de Componentes

Esta página muestra todos los componentes personalizados disponibles en la documentación de NexusEvo.

🏷️ Badges​

Los badges son útiles para mostrar estados, versiones o etiquetas.

Variantes​

DefaultPrimarySuccessWarningDangerInfo

Tamaños​

SmallMediumLarge

Uso en Código​

import Badge from '@site/src/components/Badge/Badge';

<Badge variant="success">v1.0.0</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="danger">Deprecated</Badge>

📢 Callouts​

Los callouts son perfectos para resaltar información importante.

📝Nota

Esta es una nota informativa. Úsala para proporcionar contexto adicional o información relevante.

💡Consejo

Este es un consejo útil. Comparte mejores prácticas o sugerencias con tus usuarios.

⚠️Importante

Esto es importante. Destaca información crítica que los usuarios deben conocer.

🚨Advertencia

Esta es una advertencia. Alerta sobre posibles problemas o limitaciones.

⚡Precaución

Esta es una precaución. Indica acciones que requieren cuidado especial.

Callout Personalizado​

🚀Título Personalizado

Puedes personalizar el título y el icono de cualquier callout.

Uso en Código​

import Callout from '@site/src/components/Callout/Callout';

<Callout type="tip">
  Recuerda siempre validar los datos de entrada antes de procesarlos.
</Callout>

<Callout type="warning" title="Atención" icon="⚠️">
  Esta operación es irreversible.
</Callout>

🔌 API Endpoints​

Documenta endpoints de API de forma rápida y visual.

GET/api/v1/tenants

Obtiene la lista de todos los tenants activos

POST/api/v1/tenants🔒 Auth

Crea un nuevo tenant en el sistema

PUT/api/v1/tenants/{id}🔒 Auth

Actualiza la información de un tenant existente

DELETE/api/v1/tenants/{id}🔒 Auth

Elimina un tenant del sistema

PATCH/api/v1/tenants/{id}/status🔒 Auth

Actualiza el estado de un tenant

Uso en Código​

import ApiEndpoint from "@site/src/components/ApiEndpoint/ApiEndpoint";

<ApiEndpoint
  method="POST"
  path="/api/v1/messages/send"
  description="Envía un mensaje de WhatsApp"
  auth={true}
/>;

✨ Feature List​

Muestra características de forma atractiva y organizada.

🚀

Rápido

Procesamiento ultra-rápido de mensajes con colas optimizadas

🔒

Seguro

Aislamiento completo de datos con arquitectura multi-tenant

📊

Analytics

Métricas detalladas en tiempo real de todas tus campañas

🌐

Multi-canal

WhatsApp y Email en una sola plataforma integrada

⚡

Escalable

Crece con tu negocio sin límites de capacidad

🎯

Preciso

Segmentación avanzada para campañas personalizadas

Uso en Código​

import FeatureList from "@site/src/components/FeatureList/FeatureList";

<FeatureList
  columns={3}
  features={[
    {
      icon: "🚀",
      title: "Característica",
      description: "Descripción de la característica",
    },
  ]}
/>;

🎴 Cards​

Las cards son versátiles y se pueden usar para muchos propósitos.

📖

Documentación

Accede a guías completas y referencias de API.

💬

Soporte

Obtén ayuda de nuestro equipo de soporte técnico.

🔧

Herramientas

Descarga SDKs y herramientas de desarrollo.

Cards con Enlaces​

🔐

Admin API

API de administración para gestionar tenants y configuración.

👤

Tenant API

API completa para funcionalidades de mensajería.

🎨 Combinando Componentes​

Puedes combinar componentes para crear documentación rica y atractiva:

📚

Ejemplo de Integración

💡Consejo

Este ejemplo muestra cómo combinar múltiples componentes.

Endpoint de autenticación:

POST/api/v1/auth/login

Autentica un usuario y devuelve un token JWT

Estado de la API: Operativa

💡 Consejos de Uso​

📝Nota

Todos estos componentes están optimizados para dark mode y son completamente responsive.

🎨

Personalizable

Todos los componentes aceptan props para personalizar su apariencia

📱

Responsive

Se adaptan automáticamente a diferentes tamaños de pantalla

🌙

Dark Mode

Soporte completo para modo oscuro sin configuración adicional

⚡

Performante

Optimizados para carga rápida y mínimo impacto en rendimiento