Tu Primer Componente

Bienvenido al ecosistema de componentes de Creative Minds. En esta guía, aprenderás a crear y usar tu primer componente.

Componente de Ejemplo

A continuación, verás un componente AiChat básico que muestra un mensaje de bienvenida:

Cómo Funciona

AiChat es una feature que te permite abrir una ventana de chat asistido para consultar la documentación. Sigue el patrón de arquitectura de Creative Minds: el botón sólo contiene JSX; la lógica vive en hooks/ y el estado global en store/ usando Zustand. Todo el copy está centralizado en constants/ usando el patrón copy-object.

Instalación

npx cm registry add ai_chat

Uso básico

import { AiChatFeat } from "@/registry/new-york/features/ai_chat/ai_chat_feat";
 
export default function Page() {
  return <AiChatFeat />;
}

Esto renderiza un CTA idéntico al diseño de referencia. Al hacer clic se abre un modal de chat con UI moderna (glass, sombras y transiciones suaves).

Variantes: Docs y Assistant (misma lógica)

Ambos botones comparten la misma lógica de apertura y la misma ventana de chat. Cada botón sólo cambia el modo (documentación vs asistente) y el copy mostrado.

Ejemplo en vivo:

Accesibilidad y buenas prácticas

• El CTA incluye aria-label y semántica adecuada.
• El modal añade botón de cierre con aria-label.
• El contenido textual proviene de constants (patrón copy-object), facilitando i18n y consistencia.

Arquitectura interna

• components/button.tsx: JSX del CTA.
• components/chat_window.tsx: Modal de chat (UI y entradas).
• hooks/useOpenAiChat.ts: Hook para abrir el chat.
• store/chat.ts: Estado global (isOpen, open, close, toggle).
• constants/text.ts: Copy centralizado AI_CHAT_COPY.

Características Principales

• Fácil de usar: Simplemente importa y usa el componente donde lo necesites
• Personalizable: Modifica los estilos según tus necesidades
• Responsivo: Se adapta automáticamente a diferentes tamaños de pantalla

Siguientes Pasos

1. Prueba a modificar el mensaje del componente
2. Explora otros componentes disponibles en la documentación
3. Crea tu propio componente personalizado