flaxo/ghost

public

Source code of Ghost - On Ghost

Add organizations with teams, policies, transfers and a shared namespace83bc1c616 days ago149 lines · 4.7 KB

1	"use client";
2
3	import { useRef, type
4	import Form from "next/form
5	import { Plus, Search
6
7	import { NewRepositoryDialog }
8	import { RepositoryCard }
9	import { Button }
10	import {
11	InputGroup,
12	InputGroupAddon,
13	InputGroupInput,
14	} from "@/components/ui/input-group";
15	import { Tabs, TabsContent
16
17	import type { components
18
19	export type RepositoryEntity
20
21	const FILTER_DEBOUNCE_MS = 300
22
23	export function ProfileTabs({
24	username,
25	isViewer,
26	owners,
27	defaultTab,
28	repositories,
29	query,
30	pagination,
31	overview,
32	extraTabs = [],
33	}: {
34	username: string
35	isViewer: boolean
36	owners: string
37	defaultTab: "overview
38	repositories: RepositoryEntity
39	query: string
40	/** Rendered on the server from the page's cursor. */
41	pagination: ReactNode
42	/** Rendered on the server: the profile README, or its empty state. */
43	overview: ReactNode
44	/** After Repositories: a user's organizations, or an organization's people and teams. */
45	extraTabs?: {
46	}) {
47	const filter =
48	const pending =
49
50	return (
51	<Tabs defaultValue={
52	<TabsList>
53	<TabsTrigger value="
54	<TabsTrigger value="
55	{extraTabs.map((
56	<TabsTrigger key={
57	{label}
58	</TabsTrigger>
59	))}
60	</TabsList>
61
62	<TabsContent value="
63	{overview}
64	</TabsContent>
65
66	<TabsContent value="
67	<div className="flex flex-wrap items-center gap-2
68	{/* Submitting drops the cursor, so a new filter always starts from the first page. */
69	<Form
70	ref={filter}
71	action={`/${username
72	replace
73	scroll={false}
74	className="flex-1"
75	>
76	<input type="hidden
77	<InputGroup>
78	<InputGroupAddon>
79	<Search />
80	</InputGroupAddon>
81	<InputGroupInput
82	type="search"
83	name="q"
84	placeholder="Find a repository"
85	aria-label="Find a repository"
86	defaultValue={query}
87	onChange={() =>
88	clearTimeout(pending.current
89	pending.current =
90	() => filter.
91	FILTER_DEBOUNCE_MS,
92	);
93	}}
94	/>
95	</InputGroup>
96	</Form>
97
98	{isViewer && (
99	<NewRepositoryDialog owners={
100	<Button>
101	<Plus data-icon="
102	New repository
103	</Button>
104	</NewRepositoryDialog>
105	)}
106	</div>
107
108	{repositories.length >
109	<div className="flex flex-col border-t
110	{repositories.map((
111	<RepositoryCard
112	key={repository.id
113	repository={{
114	name: repository.name
115	slug: repository.slug
116	owner: username,
117	description: repository.description
118	visibility: repository.visibility
119	updatedAt: repository.lastPushedAt
120	}}
121	/>
122	))}
123	</div>
124	) : (
125	<div className="flex flex-col items-center gap-3 rounded-lg border border-dashed py-16 text-center
126	<p className="text-sm font-medium
127	{query ? "No matching repositories
128	</p>
129	<p className="max-w-xs text-sm text-muted-foreground
130	{query
131	? "Try a different search term."
132	: isViewer
133	? "Create your first repository to start tracking a project."
134	: `${username} hasn't published any repositories.
135	</p>
136	</div>
137	)}
138
139	{pagination}
140	</TabsContent>
141
142	{extraTabs.map((
143	<TabsContent key={
144	{content}
145	</TabsContent>
146	))}
147	</Tabs>
148	);
149	}