Blife UI

dashboard basic anatomy

Uso Básico

import { Dashboard } from "@blifedesarrollo/blife-ui/dashboard";
import { HouseIcon, UserIcon } from "icons";
 
function BasicDashboard() {
  return (
    <Dashboard
      currentPath="/"
      sidebar={{
        branding: <div>Mi Logo</div>,
        navigation: [
          {
            label: "INICIO",
            items: [
              {
                label: "Panel principal",
                href: "/",
                icon: <HouseIcon />,
              },
              {
                label: "Usuarios",
                href: "/usuarios",
                icon: <UserIcon />,
              },
            ],
          },
        ],
      }}
    >
      Contenido del dashboard
    </Dashboard>
  );
}

Navegación Jerárquica

El componente soporta navegación anidada con múltiples niveles. Los elementos con hijos se expanden/colapsan automáticamente.

dashboard navigation anatomy

import { Dashboard } from "@blifedesarrollo/blife-ui/dashboard";
 
function HierarchicalNavigation() {
  return (
    <Dashboard
      sidebar={{
        navigation: [
          {
            label: "MENÚ PRINCIPAL", // Etiqueta del grupo de navegación
            items: [
              {
                // Elemento de navegación
                label: "Inicio", // Etiqueta del elemento de navegación
                href: "/", // URL de redirección del elemento de navegación
                icon: <HouseIcon />, // Icono del elemento de navegación
              },
 
              {
                label: "Productos",
                icon: <UserIcon />,
                children: [
                  // Items hijos del elemento de navegación
                  {
                    label: "Lista de productos",
                    href: "/productos",
                  },
                  {
                    label: "Categorías",
                    href: "/productos/categorias",
                  },
                ],
              },
            ],
          },
        ],
      }}
    >
      Contenido del dashboard
    </Dashboard>
  );
}

Menú de Cuenta de Usuario

Puedes mostrar un menú de cuenta de usuario con información del usuario y acciones personalizadas.

dashboard account menu anatomy

import { Dashboard } from "@blifedesarrollo/blife-ui/dashboard";
import { UserIcon } from "@phosphor-icons/react";
 
function DashboardWithAccountMenu() {
  return (
    <Dashboard
      sidebar={{
        accountMenu: {
          visible: true, // Indica si el menú de cuenta de usuario se debe mostrar
          user: {
            // Configuración con la información del usuario
            username: "Alex García", // Nombre del usuario
            email: "alex@example.com", // Email del usuario
            avatarUrl: "https://images.pexels.com/photos/1040880/pexels-photo-1040880.jpeg", // URL de la imagen del usuario
            initials: "AG", // Iniciales del usuario para mostrar en caso de que no haya imagen(fallback)
          },
          actions: [
            // Acciones del menú de cuenta de usuario
            {
              label: "Perfil", // Etiqueta de la acción
              icon: <UserIcon />, // Icono de la acción
              onClick: () => handleGoToProfile(), // Función a ejecutar al hacer clic en la acción
            },
            {
              label: "Configuración",
              onClick: () => handleGoToSettings(),
            },
            {
              label: "Cerrar sesión",
              onClick: () => handleLogout(),
            },
          ],
        },
      }}
    >
      Contenido del dashboard
    </Dashboard>
  );
}

Footer del Sidebar

Puedes agregar contenido personalizado en el footer del sidebar, como notificaciones o enlaces adicionales.

import { Dashboard, SidebarMenuItem } from "@blifedesarrollo/blife-ui/dashboard";
 
function DashboardWithFooter() {
  return (
    <Dashboard
      sidebar={{
        footer: (
          <div>
            <SidebarMenuItem label="Chat soporte" icon={<ChatTextIcon />} />
            <SidebarMenuItem label="Notificaciones" icon={<BellIcon />} />
            <div>B Life 2025</div>
          </div>
        ),
      }}
    >
      Contenido del dashboard
    </Dashboard>
  );
}

Header Personalizado

Puedes agregar contenido en el área del encabezado del sidebar y header del contenido principal del dashboard en version mobile.

import { Dashboard } from "@blifedesarrollo/blife-ui/dashboard";
 
function DashboardWithHeader() {
  return (
    <Dashboard
      header={
        <>
          <NotificationsAction />
          <SearchAction />
        </>
      }
    >
      Contenido del dashboard
    </Dashboard>
  );
}

Enrutamiento

Cuando usas frameworks como Next.js, o librerias de enrutamiento como React Router, puedes proporcionar el componente de routing que ya te proporciona.

Next.js

import { Dashboard } from "@blifedesarrollo/blife-ui/dashboard";
import Link from "next/link";
 
function DashboardNextLink() {
  return <Dashboard linkComponent={Link}>Contenido del dashboard</Dashboard>;
}

React Router

import { Dashboard } from "@blifedesarrollo/blife-ui/dashboard";
import { Link } from "react-router";
 
function DashboardReactRouterLink() {
  return (
    <Dashboard
      linkComponent={({ href, children, ...props }) => (
        <Link to={href} {...props}>
          {children}
        </Link>
      )}
    >
      Contenido del dashboard
    </Dashboard>
  );
}

Estructura de Navegación

La navegación se estructura mediante grupos (NavigationGroup) que contienen items (NavigationItem). Los items pueden tener hijos para crear una jerarquía de navegación.

NavigationGroup

interface NavigationGroup {
  label: string; // Etiqueta del grupo (opcional)
  items: NavigationItem[]; // Items de navegación del grupo
}

NavigationItem

interface NavigationItem {
  label: string; // Etiqueta del item
  icon?: React.ReactNode; // Icono opcional
  href?: string; // URL del item (si es un enlace)
  onClick?: () => void; // Función onClick (si no es un enlace)
  children?: NavigationItem[]; // Items hijos para navegación anidada
}

Props

Dashboard

Prop	Tipo	Requerido	Descripción
`children`	`ReactNode`	-	Contenido principal del dashboard que se renderiza en el área principal
`sidebar`	`object`	-	Configuración del sidebar
`currentPath`	`string`	-	Ruta actual de la aplicación. Se usa para resaltar el item de navegación activo
`linkComponent`	`ComponentType<{ href: string; children: ReactNode; className?: string; onClick?: () => void }>`	-	Componente personalizado para renderizar los enlaces de navegación. Útil para frameworks como Next.js o React Router
`header`	`ReactNode`	-	Contenido opcional para el header del área principal del dashboard
`...rest`	`ComponentProps<"div">`	-	Todas las props del elemento HTML div