Labels List

Installation

pnpm dlx shadcn@latest add @ecodeliver/labels-list

Usage

Pass the full labels array. Status filtering is owned inside the component (all or a LabelStatus). Wire onMarkConsumed for the trash action on active packs.

import { LabelsList } from "@/components/registry/labels-list";
import { labels } from "@/mocks";

export function Example() {
  return (
    <LabelsList
      labels={labels}
      onMarkConsumed={(id) => {
        // open confirm dialog for id
      }}
    />
  );
}

Display

• Range: rangeFrom - rangeTo
• Subtitle from status + updatedAt (format(..., "PP", { locale: es }))
• Active: percent and used/500 usadas, trash action
• Consumed / disabled: status badge

Filters (UI labels in Spanish): Todas, Activas, Consumidas, Desactivadas. Pack size is always 500.

API Reference

LabelsList

LabelPack