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 {
  useTapFilters,
  useTapQuery,
  type TapTabProps,
} from "@tappify/extension-sdk";
import {
  EmptyState,
  PageHeader,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@tappify/extension-sdk/ui";
import "@tappify/extension-sdk/ui/styles.css";

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

  return (
    <Stack gap={24}>
      <PageHeader
        title="Ratings"
        description="Every review Tappify holds for the range the page is showing."
      />
      {rows.length === 0 ? (
        <EmptyState title="No reviews in this range." />
      ) : (
        <Table>
          <TableHeader>
            <TableRow variant="header">
              <TableHead>Submitted</TableHead>
              <TableHead>Country</TableHead>
              <TableHead>Rating</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((row) => (
              <TableRow key={row.id}>
                <TableCell>{row.submittedAt}</TableCell>
                <TableCell>{row.country}</TableCell>
                <TableCell>{row.rating}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
    </Stack>
  );
}