1
import { BookOpen, GitBranch, Tag } from "lucide-react";
2
import { MarkdownContent } from "@/client/components/MarkdownContent";
3
import { type Progress, ProgressBanner } from "@/client/components/ProgressBanner";
4
import { RepoNav } from "@/client/components/RepoNav";
5
import { Card } from "@/client/components/ui/card";
6
import { EmptyState } from "@/client/components/EmptyState";
7
 
8
type RefLink = {
9
  name: string;
10
  displayName: string;
11
};
12
 
13
export type OverviewPageProps = {
14
  owner: string;
15
  repo: string;
16
  refShort: string;
17
  refEnc: string;
18
  branches: RefLink[];
19
  tags: RefLink[];
20
  readmeMd?: string;
21
  progress?: Progress;
22
};
23
 
24
export function OverviewPage({
25
  owner,
26
  repo,
27
  refShort,
28
  refEnc,
29
  branches,
30
  tags,
31
  readmeMd,
32
  progress,
33
}: OverviewPageProps) {
34
  return (
35
    <>
36
      <RepoNav owner={owner} repo={repo} refEnc={refEnc} showRefDropdown={false} />
37
      <ProgressBanner progress={progress} />
38
      <div className="mt-6 grid gap-6 md:grid-cols-[1fr_2fr] [&>*]:min-w-0">
39
        {/* Left column: Refs */}
40
        <div className="space-y-6">
41
          <Card>
42
            <h3 className="flex items-center gap-2">
43
              <GitBranch className="inline h-4 w-4 text-accent-500" aria-hidden="true" />
44
              Branches
45
            </h3>
46
            <p className="mb-2 text-sm text-zinc-500 dark:text-zinc-400">
47
              Default: <code>{refShort}</code>
48
            </p>
49
            <div className="[&>div]:border-b [&>div]:border-zinc-200 dark:[&>div]:border-zinc-800 [&>div]:py-2 [&>div:last-child]:border-b-0">
50
              {branches.length ? (
51
                branches.map((branch) => (
52
                  <div key={branch.name}>
53
                    <a href={`/${owner}/${repo}/tree?ref=${branch.name}`}>{branch.displayName}</a>
54
                  </div>
55
                ))
56
              ) : (
57
                <EmptyState
58
                  icon={
59
                    <GitBranch
60
                      className="h-5 w-5 text-zinc-500 dark:text-zinc-400"
61
                      aria-hidden="true"
62
                    />
63
                  }
64
                  title="No branches yet"
65
                />
66
              )}
67
            </div>
68
          </Card>
69
          <Card>
70
            <h3 className="flex items-center gap-2">
71
              <Tag className="inline h-4 w-4 text-accent-500" aria-hidden="true" />
72
              Tags
73
            </h3>
74
            <div className="[&>div]:border-b [&>div]:border-zinc-200 dark:[&>div]:border-zinc-800 [&>div]:py-2 [&>div:last-child]:border-b-0">
75
              {tags.length ? (
76
                tags.map((tag) => (
77
                  <div key={tag.name}>
78
                    <a href={`/${owner}/${repo}/tree?ref=${tag.name}`}>{tag.displayName}</a>
79
                  </div>
80
                ))
81
              ) : (
82
                <EmptyState
83
                  icon={
84
                    <Tag className="h-5 w-5 text-zinc-500 dark:text-zinc-400" aria-hidden="true" />
85
                  }
86
                  title="No tags yet"
87
                />
88
              )}
89
            </div>
90
          </Card>
91
        </div>
92
        {/* Right column: README */}
93
        <div>
94
          {readmeMd ? (
95
            <Card>
96
              <MarkdownContent
97
                markdown={readmeMd}
98
                context={{ owner, repo, ref: refShort, baseDir: "" }}
99
              />
100
            </Card>
101
          ) : (
102
            <Card>
103
              <EmptyState
104
                icon={
105
                  <BookOpen
106
                    className="h-5 w-5 text-zinc-500 dark:text-zinc-400"
107
                    aria-hidden="true"
108
                  />
109
                }
110
                title="No README found"
111
                detail="Add a README.md to the root of your repository."
112
              />
113
            </Card>
114
          )}
115
        </div>
116
      </div>
117
    </>
118
  );
119
}