Add a row action

tappify extension add row-action --name "Explain rank" --table analytics.keywords

{
  "contributes": {
    "rowActions": [
      {
        "id": "explain-rank",
        "title": "Explain rank",
        "entry": "src/row-actions/explain-rank.tsx",
        "table": "analytics.keywords"
      }
    ]
  }
}

import { useTap, useTapServer, type TapRowActionProps } from "@tappify/extension-sdk";
import {
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@tappify/extension-sdk/ui";
import "@tappify/extension-sdk/ui/styles.css";

export default function ExplainRank({ row }: TapRowActionProps) {
  const tap = useTap();
  const keyword = typeof row.keyword === "string" ? row.keyword : "";
  const explanation = useTapServer("explainRank", { keyword });

  return (
    <Card>
      <CardHeader>
        <CardTitle>{`Why "${keyword}" moved`}</CardTitle>
      </CardHeader>
      <CardContent>{explanation.data?.summary}</CardContent>
      <CardFooter>
        <Button
          variant="tertiary"
          size="sm"
          onClick={() => void tap.ui.copy(explanation.data?.summary ?? "")}
        >
          Copy
        </Button>
      </CardFooter>
    </Card>
  );
}