gitfor/platform

import { createFileRoute, Link } from "@tanstack/react-router";
import { CommitAuthor } from "~/components/CommitAuthor";
import { getCommit } from "~/fns/browse";
import { DiffView } from "~/components/DiffView";
import { StatusList } from "~/components/StatusList";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { buttonClass } from "~/ui/Button";
import { SignatureBadge } from "~/components/security/SignatureBadge";
import { useCommitSignatures } from "~/hooks/use-commit-signatures";
import { Heading } from "~/ui/Heading";

export const Route = createFileRoute("/$owner/$repo/commit/$sha")({
  loader: ({ params }) => getCommit({ data: { owner: params.owner, repo: params.repo, sha: params.sha } }),
  component: CommitPage,
});

function CommitPage() {
  const { commit, diff, statuses } = Route.useLoaderData();
  const { owner, repo } = Route.useParams();
  const signatures = useCommitSignatures(owner, repo, [commit.sha]);
  const body = commit.message.split("\n").slice(1).join("\n").trim();
  const checks = statuses.map((status) => ({
    context: status.context,
    state: status.state,
    description: status.description,
    targetUrl: status.target_url,
  }));

  return (
    <div className="space-y-5">
      <Panel>
        <div className="space-y-3 p-5">
          <Heading>{commit.subject}</Heading>
          {body && <pre className="font-sans text-sm whitespace-pre-wrap text-kumo-subtle">{body}</pre>}
          <div className="flex flex-wrap items-center gap-3 text-sm text-kumo-subtle">
            <CommitAuthor authorName={commit.authorName} authorAccount={commit.authorAccount} />
            <span>
              committed <RelativeTime timestamp={commit.committedAt} />
            </span>