componente · @solu30/ui-kit/display

PageHeaderSkeleton

Esqueleto de carga con la forma de un encabezado de página: título, descripción y botones de acción.

21 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

gestorsalon
luigi
zentrya

El componente, montado

Cargando el espécimen…

export function PageHeaderSkeletonSpecimen() {
  return (
    <Stage label="PageHeaderSkeleton · el esqueleto contra el encabezado que imita" tall wide>
      <div className="flex w-full max-w-[560px] flex-col gap-5">
        <div className="flex flex-col gap-1.5">
          <span className="font-mono text-[11px] text-content/50">cargando — actions=2, hasDescription</span>
          <div className="rounded-lg border border-content/10 bg-container p-4">
            <PageHeaderSkeleton actions={2} hasDescription />
          </div>
        </div>

        <div className="flex flex-col gap-1.5">
          <span className="font-mono text-[11px] text-content/50">cargado — el mismo encabezado con datos</span>
          <div className="flex items-start justify-between gap-4 rounded-lg border border-content/10 bg-container p-4">
            <div className="flex flex-col gap-1">
              <span className="text-lg font-semibold text-content">Salón Los Álamos</span>
              <span className="text-sm text-content/60">120 invitados · terraza propia · cocina equipada</span>
            </div>
            <div className="flex shrink-0 gap-2">
              <Button variant="secondary" size="sm">
                Editar
              </Button>
              <Button variant="primary" size="sm">
                Reservar
              </Button>
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-1.5">
          <span className="font-mono text-[11px] text-content/50">actions=0, hasDescription=false — sólo el título</span>
          <div className="rounded-lg border border-content/10 bg-container p-4">
            <PageHeaderSkeleton actions={0} hasDescription={false} />
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · PageHeaderSkeletonSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { PageHeaderSkeleton } from '@solu30/ui-kit/display'

Props

El catálogo no extrajo props para este símbolo, y eso admite dos lecturas: que el tipo no declare ninguna propia —heredarlas de un elemento HTML es lo normal en las piezas de composición— o que su interfaz se llame distinto y el extractor no la siga. Los filtros de columna son el segundo caso: declaran cuatro props requeridas en SelectFilterProps.

Ejemplo del paquete

// In a loading state:
<PageHeaderSkeleton actions={2} hasDescription />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.