Add a tab

tappify extension add tab --name Ratings --page analytics

{
  "contributes": {
    "tabs": [
      {
        "id": "ratings",
        "title": "Ratings",
        "entry": "src/tabs/ratings.tsx",
        "page": "analytics"
      }
    ]
  }
}

import {
  TapPageHeader,
  TapTable,
  useTapFilters,
  useTapQuery,
  type TapTabProps,
} from "@tappify/extension-sdk";
import "@tappify/extension-sdk/styles.css";

export default function Ratings(_props: TapTabProps) {
  const filters = useTapFilters();
  const reviews = useTapQuery({ kind: "reviews", range: filters.range });

  return (
    <div className="tap-stack">
      <TapPageHeader
        title="Ratings"
        description="Every review Tappify holds for the range the page is showing."
      />
      <TapTable
        columns={[
          { key: "submittedAt", label: "Submitted" },
          { key: "country", label: "Country" },
          { key: "rating", label: "Rating", align: "end" },
        ]}
        rows={reviews.data?.reviews ?? []}
        rowKey={(row) => row.id}
        empty="No reviews in this range."
      />
    </div>
  );
}