flaxo/ghost

public

Source code of Ghost - On Ghost

Update create-branch-dialog.tsx08bd7f515 days ago145 lines · 3.8 KB

1	"use client";
2
3	import { zodResolver } from
4	import { Plus }
5	import { useAction }
6	import { useState }
7	import { Controller, useForm
8
9	import { createBranch }
10	import {
11	type CreateBranchInput,
12	createBranchSchema,
13	} from "@/components/repositories/common";
14	import { Button }
15	import {
16	Dialog,
17	DialogClose,
18	DialogContent,
19	DialogFooter,
20	DialogHeader,
21	DialogTitle,
22	DialogTrigger,
23	} from "@/components/ui/dialog";
24	import {
25	Field,
26	FieldError,
27	FieldGroup,
28	FieldLabel,
29	} from "@/components/ui/field";
30	import { Input }
31	import {
32	Select,
33	SelectContent,
34	SelectItem,
35	SelectTrigger,
36	SelectValue,
37	} from "@/components/ui/select";
38	import { Spinner }
39
40	export function CreateBranchDialog({
41	username,
42	repo,
43	branches,
44	defaultBranch,
45	}: {
46	username: string
47	repo: string
48	branches: string
49	defaultBranch: string
50	}) {
51	const [open,
52	const {
53	control,
54	register,
55	handleSubmit,
56	reset,
57	formState: { errors
58	} = useForm<CreateBranchInput
59	resolver: zodResolver(createBranchSchema
60	defaultValues: { name: ""
61	});
62
63	const { execute,
64	onSuccess: () =>
65	setOpen(false);
66	reset({ name:
67	},
68	});
69
70	return (
71	<Dialog open={
72	<DialogTrigger asChild>
73	<Button size="
74	<Plus data-icon="
75	New branch
76	</Button>
77	</DialogTrigger>
78
79	<DialogContent className="
80	<DialogHeader>
81	<DialogTitle>Create a branch</DialogTitle
82	</DialogHeader>
83
84	<form
85	onSubmit={handleSubmit((
86	execute({ ...input
87	)}
88	className="contents"
89	>
90	<FieldGroup>
91	<Field>
92	<FieldLabel htmlFor="
93	<Input
94	id="branch-name"
95	placeholder="feat/my-change"
96	autoComplete="off"
97	aria-invalid={Boolean(errors
98	{...register("name
99	/>
100	<FieldError errors={
101	</Field>
102
103	<Field>
104	<FieldLabel htmlFor="
105	<Controller
106	control={control}
107	name="from"
108	render={({ field
109	<Select value={
110	<SelectTrigger id="
111	<SelectValue />
112	</SelectTrigger>
113	<SelectContent>
114	{branches.map((
115	<SelectItem key={
116	{branch}
117	</SelectItem>
118	))}
119	</SelectContent>
120	</Select>
121	)}
122	/>
123	</Field>
124
125	{result.serverError &&
126	<FieldError>{result.
127	)}
128	</FieldGroup>
129
130	<DialogFooter className="
131	<DialogClose asChild>
132	<Button type="
133	Cancel
134	</Button>
135	</DialogClose>
136	<Button type="
137	{isExecuting && <Spinner
138	Create branch
139	</Button>
140	</DialogFooter>
141	</form>
142	</DialogContent>
143	</Dialog>
144	);
145	}