Add a widget

tappify extension add widget --name Funnel --page analytics --slot kpi-row --size 2x1 --expandable

{
  "contributes": {
    "widgets": [
      {
        "id": "funnel",
        "title": "Funnel",
        "entry": "src/widgets/funnel.tsx",
        "page": "analytics",
        "slot": "kpi-row",
        "size": "2x1",
        "expandable": true
      }
    ]
  }
}

import {
  TapCard,
  TapEmptyState,
  TapSkeleton,
  TapStat,
  useTap,
  useTapFilters,
  useTapQuery,
  type TapWidgetProps,
} from "@tappify/extension-sdk";
import "@tappify/extension-sdk/styles.css";

export default function Funnel(_props: TapWidgetProps) {
  const tap = useTap();
  const filters = useTapFilters();
  const downloads = useTapQuery({
    kind: "series",
    metric: "downloads",
    range: filters.range,
  });

  if (downloads.isLoading) {
    return (
      <TapCard title="Funnel">
        <TapSkeleton lines={2} />
      </TapCard>
    );
  }

  const points = downloads.data?.points ?? [];

  return (
    <TapCard title="Funnel">
      {points.length === 0 ? (
        <TapEmptyState
          title="No downloads in this range"
          description="Widen the date picker to see numbers here."
        />
      ) : (
        <TapStat
          label="Downloads"
          value={tap.format.number(
            points.reduce((sum, point) => sum + point.value, 0),
          )}
        />
      )}
    </TapCard>
  );
}