1
import type { ProjectDetail } from "@/contracts";
2
import { Clock, FileCode, GitBranch, Globe, Settings, Zap } from "lucide-react";
3
import { Link } from "react-router-dom";
4
import { StatusPill } from "@/client/components/status-pill";
5
import { Card } from "@/client/components/ui";
6
import { formatTimestamp, inferRepositoryProvider } from "@/client/lib";
7
 
8
export const ProjectMetadataCard = ({
9
  project,
10
  settingsHref,
11
}: {
12
  project: ProjectDetail["project"];
13
  settingsHref?: string;
14
}) => (
15
  <Card>
16
    <div className="flex items-start justify-between gap-3">
17
      <div>
18
        <p className="text-xs uppercase tracking-[0.24em] text-zinc-500">Project overview</p>
19
        <h1 className="mt-2 font-display text-xl font-semibold text-zinc-100">{project.name}</h1>
20
        <p className="mt-0.5 text-sm text-zinc-500">
21
          {project.ownerSlug}/{project.projectSlug}
22
        </p>
23
      </div>
24
      <StatusPill status={project.lastRunStatus} />
25
    </div>
26
27
    <div className="mt-4 space-y-1.5 text-sm text-zinc-400">
28
      <p className="flex items-center gap-2">
29
        <Globe className="h-3.5 w-3.5 shrink-0 text-zinc-500" />
30
        {inferRepositoryProvider(project.repoUrl)}
31
      </p>
32
      <p className="flex items-center gap-2">
33
        <GitBranch className="h-3.5 w-3.5 shrink-0 text-zinc-500" />
34
        {project.defaultBranch}
35
      </p>
36
      <p className="flex items-center gap-2">
37
        <FileCode className="h-3.5 w-3.5 shrink-0 text-zinc-500" />
38
        <span className="font-mono text-xs">{project.configPath}</span>
39
      </p>
40
      <p className="flex items-center gap-2">
41
        <Zap className="h-3.5 w-3.5 shrink-0 text-zinc-500" />
42
        {project.dispatchMode === "queue" ? "Queue" : "Workflows"}
43
      </p>
44
      <p className="flex items-center gap-2 text-zinc-500">
45
        <Clock className="h-3.5 w-3.5 shrink-0" />
46
        Updated {formatTimestamp(project.updatedAt)}
47
      </p>
48
      {settingsHref ? (
49
        <Link to={settingsHref} className="flex items-center gap-2 text-zinc-500 transition-colors hover:text-zinc-300">
50
          <Settings className="h-3.5 w-3.5 shrink-0" />
51
          Settings
52
        </Link>
53
      ) : null}
54
    </div>
55
  </Card>
56
);