Components
Registry
Components
Deliveries
1,998
Success rate
97.5%
Failures
49
"use client";
import { WebhookMetricsCards } from "@/components/webhook-metrics-cards";Installation#
pnpm dlx shadcn@latest add @repost/webhook-metrics-cardsInstalls this item, every component it depends on, and the npm packages listed below.
Usage#
This component is presentational: it renders what you pass it and calls back on
interaction. In a live dashboard the data comes from useLogsHistogram({ dateFrom, dateTo })
(@repost/portal-react), but any data of
the same shape works.
"use client";
import { WebhookMetricsCards } from "@/components/webhook-metrics-cards";
import { fixtureHistogramSlots } from "@/fixtures/webhook-fixtures";
export function WebhookMetricsCardsDemo() {
return <WebhookMetricsCards slots={fixtureHistogramSlots()} />;
}
Props#
| Prop | Type | Description |
|---|---|---|
slots | WebhookHistogramSlot[] | Time-bucketed counts. |
isLoading | boolean | Renders skeleton values. |
failureKeys | string[] | Series keys counted as failures. |