flaxo/ghost

public

Source code of Ghost - On Ghost

webhooks: add a webhook from its own pagea3f4d6e13 days ago128 lines · 4.0 KB

1	/** biome-ignore-all lint/suspicious/noArrayIndexKey: skeleton rows have no id */
2	import { Plus, Webhook
3	import Link from "next/link
4	import { Fragment }
5
6	import { Badge }
7	import { Button }
8	import { Card }
9	import {
10	Empty,
11	EmptyDescription,
12	EmptyHeader,
13	EmptyMedia,
14	EmptyTitle,
15	} from "@/components/ui/empty";
16	import {
17	Item,
18	ItemActions,
19	ItemContent,
20	ItemDescription,
21	ItemGroup,
22	ItemMedia,
23	ItemSeparator,
24	ItemTitle,
25	} from "@/components/ui/item";
26	import { Skeleton }
27	import type { components
28	import { type WebhookOwner,
29
30	export function WebhookList({
31	owner,
32	webhooks,
33	}: {
34	owner: WebhookOwner
35	webhooks: components
36	}) {
37	return (
38	<section>
39	<div className="mb-3 flex items-center justify-between gap-3
40	<h2 className="text-sm font-semibold
41	Webhooks
42	<span className="ml-2 font-normal text-muted-foreground tabular-nums
43	{webhooks.length}
44	</span>
45	</h2>
46	<Button size="
47	<Link href={
48	<Plus />
49	Add webhook
50	</Link>
51	</Button>
52	</div>
53	<Card className="
54	{webhooks.length ===
55	<Empty className="
56	<EmptyHeader>
57	<EmptyMedia variant="
58	<Webhook />
59	</EmptyMedia>
60	<EmptyTitle>No webhooks yet</EmptyTitle
61	<EmptyDescription>
62	Ghost POSTs a signed JSON payload to each URL you add here
63	whenever one of its events happens.
64	</EmptyDescription>
65	</EmptyHeader>
66	</Empty>
67	) : (
68	<ItemGroup className="
69	{webhooks.map((
70	<Fragment key={
71	{index > 0
72	<Item className="
73	<ItemMedia variant="
74	<Webhook />
75	</ItemMedia>
76	<ItemContent className="
77	<ItemTitle className="
78	<span className="truncate font-mono text-xs
79	{webhook.url}
80	</span>
81	{!webhook.active
82	<Badge variant="
83	)}
84	</ItemTitle>
85	<ItemDescription className="
86	{webhook.disabledReason ??
87	`${webhook.events.
88	</ItemDescription>
89	</ItemContent>
90	<ItemActions>
91	<Button size="
92	<Link href={
93	Edit
94	</Link>
95	</Button>
96	</ItemActions>
97	</Item>
98	</Fragment>
99	))}
100	</ItemGroup>
101	)}
102	</Card>
103	</section>
104	);
105	}
106
107	export function WebhookListSkeleton()
108	return (
109	<section>
110	<div className="mb-3 flex items-center justify-between
111	<Skeleton className="
112	<Skeleton className="
113	</div>
114	<ul className="divide-y rounded-lg border
115	{Array.from({
116	<li key={index
117	<Skeleton className="
118	<div className="flex flex-1 flex-col gap-1.5
119	<Skeleton className="
120	<Skeleton className="
121	</div>
122	<Skeleton className="
123	</li>
124	))}
125	</ul>
126	</section>
127	);
128	}