gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { z } from "zod";
import { listDeployments } from "~/fns/deployments";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { StatusDot } from "~/ui/StatusDot";
import { cn } from "~/utils/cn";
import { ExternalLink } from "~/ui/TextLink";

const STATUS_DOT: Record<string, string> = {
  waiting: "pending",
  queued: "queued",
  in_progress: "in_progress",
  success: "success",
  failure: "failure",
  cancelled: "cancelled",
  rejected: "failure",
};

export const Route = createFileRoute("/$owner/$repo/deployments")({
  validateSearch: z.object({ environment: z.string().optional() }),
  loaderDeps: ({ search }) => search,
  loader: ({ params, deps }) =>
    listDeployments({ data: { owner: params.owner, repo: params.repo, environment: deps.environment } }),
  component: DeploymentsPage,
});

function DeploymentsPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();
  return (
    <div className="grid gap-6 lg:grid-cols-[260px_1fr]">
      <aside className="space-y-2">
        <h2 className="label-small text-kumo-subtle">Environments</h2>
        <Link
          to="/$owner/$repo/deployments"
          params={params}