Dashboard Page

Página de dashboard de ejemplo. Se instala en app/dashboard/page.tsx.

Componente Dependencias: button NPM: react

registry/pages/dashboard-page/dashboard.tsx

"use client"

import * as React from "react"
import { Button } from "@/components/enlolab/button"

export function Dashboard() {
  const [count, setCount] = React.useState(0)

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div className="p-4 rounded-lg border bg-card">
          <h3 className="text-lg font-semibold mb-2">Usuarios</h3>
          <p className="text-2xl font-bold">1,234</p>
        </div>
        <div className="p-4 rounded-lg border bg-card">
          <h3 className="text-lg font-semibold mb-2">Ventas</h3>
          <p className="text-2xl font-bold">$5,678</p>
        </div>
        <div className="p-4 rounded-lg border bg-card">
          <h3 className="text-lg font-semibold mb-2">Pedidos</h3>
          <p className="text-2xl font-bold">89</p>
        </div>
      </div>

      <div className="p-4 rounded-lg border bg-card">
        <h2 className="text-xl font-semibold mb-4">Contador de Ejemplo</h2>
        <div className="flex items-center gap-4">
          <Button onClick={() => setCount(count - 1)} variant="outline">
            -
          </Button>
          <span className="text-2xl font-bold">{count}</span>
          <Button onClick={() => setCount(count + 1)}>
            +
          </Button>
        </div>
      </div>
    </div>
  )
}

Instalación

Para instalar este componente, primero configura el registry en tu components.json:

{
  "registries": {
    "@enlolab": {
      "url": "https://ui.enlolab.com/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REGISTRY_TOKEN}"
      }
    }
  }
}

Luego instala el componente:

npx shadcn@latest add @enlolab/dashboard-page