gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { createDeployToken, listDeployTokens, revokeDeployToken } from "~/fns/tokens";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { SecretReveal } from "~/ui/Callout";

const EXPIRY = [
  { value: "30", label: "30 days" },
  { value: "90", label: "90 days" },
  { value: "365", label: "1 year" },
  { value: "0", label: "No expiration" },
] as const;

export const Route = createFileRoute("/$owner/$repo/settings/deploy-tokens")({
  loader: ({ params }) => listDeployTokens({ data: { owner: params.owner, repo: params.repo } }),
  component: DeployTokensPage,
});

function DeployTokensPage() {
  const tokens = Route.useLoaderData();
  const params = Route.useParams();
  const create = useAction(createDeployToken);
  const revoke = useAction(revokeDeployToken);
  const [created, setCreated] = useState<string | null>(null);

  return (
    <>
      <Panel title="New deploy token">
        <form
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const formElement = event.currentTarget;