1
import { RefreshCw } from "lucide-react";
2
import { Button } from "@/client/components/ui/button";
3
import { Card } from "@/client/components/ui/card";
4
import { classifyRef, shortRefName } from "@/shared/git/ref-display";
5
import { shortValue } from "./format";
6
 
7
export type RefsCardProps = {
8
  refs: Array<{ name: string; oid: string }>;
9
};
10
 
11
export function RefsCard({ refs }: RefsCardProps) {
12
  return (
13
    <Card>
14
      <div className="mb-4 flex items-center justify-between">
15
        <h2 className="text-xl font-semibold">References</h2>
16
        <Button size="sm" type="button" onClick={() => window.location.reload()}>
17
          <RefreshCw className="mr-2 inline h-4 w-4 align-[-2px]" aria-hidden="true" />
18
          <span className="label">Refresh All</span>
19
        </Button>
20
      </div>
21
      {refs.length ? (
22
        <div className="overflow-x-auto">
23
          <table className="w-full text-sm">
24
            <thead>
25
              <tr className="border-b border-zinc-200 dark:border-zinc-800">
26
                <th className="py-2 text-left">Reference Name</th>
27
                <th className="py-2 text-left">Target OID</th>
28
                <th className="py-2 text-left">Type</th>
29
              </tr>
30
            </thead>
31
            <tbody>
32
              {refs.map((ref) => {
33
                const kind = classifyRef(ref.name);
34
35
                return (
36
                  <tr key={ref.name} className="border-b border-zinc-100 dark:border-zinc-800">
37
                    <td className="py-2 font-mono text-xs">{shortRefName(ref.name)}</td>
38
                    <td className="py-2 font-mono text-xs text-zinc-600 dark:text-zinc-400">
39
                      <span title={ref.oid}>{shortValue(ref.oid, 12)}</span>
40
                    </td>
41
                    <td className="py-2">
42
                      <span
43
                        className={`rounded px-2 py-1 text-xs ${
44
                          kind === "branch"
45
                            ? "bg-accent-100 dark:bg-accent-900"
46
                            : kind === "tag"
47
                              ? "bg-green-100 dark:bg-green-900"
48
                              : "bg-zinc-100 dark:bg-zinc-800"
49
                        }`}
50
                      >
51
                        {kind === "branch"
52
                          ? "branch"
53
                          : kind === "tag"
54
                            ? "tag"
55
                            : ref.name.split("/")[0]}
56
                      </span>
57
                    </td>
58
                  </tr>
59
                );
60
              })}
61
            </tbody>
62
          </table>
63
        </div>
64
      ) : (
65
        <p className="italic text-zinc-500">No references found</p>
66
      )}
67
    </Card>
68
  );
69
}