phantomknight287/saturn

public

The operating system for your freelance business.

feat: here comes the money442302e7 months ago173 lines · 5.5 KB

1	import { zodResolver } from '@hookform/resolvers/zod'
2	import { format }
3	import { CalendarIcon }
4	import type { Dispatch,
5	import { Controller, useForm
6	import type z from
7	import { Button }
8	import { Calendar }
9	import {
10	Dialog,
11	DialogClose,
12	DialogContent,
13	DialogFooter,
14	DialogHeader,
15	DialogTitle,
16	} from '@/components/ui/dialog'
17	import {
18	Field,
19	FieldDescription,
20	FieldError,
21	FieldGroup,
22	FieldLabel,
23	} from '@/components/ui/field'
24	import { Input }
25	import {
26	Popover,
27	PopoverContent,
28	PopoverTrigger,
29	} from '@/components/ui/popover'
30	import { cn }
31	import { createProjectSchema }
32
33	export default function CreateProjectDialog
34	dialogOpen,
35	setDialogOpen,
36	orgSlug,
37	organizationId,
38	handleSubmit,
39	isPending,
40	}: {
41	dialogOpen: boolean
42	setDialogOpen: Dispatch
43	organizationId: string
44	orgSlug: string
45	handleSubmit: (values
46	isPending: boolean
47	}) {
48	const form =
49	resolver: zodResolver(createProjectSchema
50	defaultValues: {
51	organizationId,
52	orgSlug,
53	name: '',
54	description: '',
55	},
56	})
57	return (
58	<Dialog onOpenChange={
59	<DialogContent>
60	<DialogHeader>
61	<DialogTitle>Create a new project</DialogTitle
62	</DialogHeader>
63	<form className='space-y-4
64	<FieldGroup>
65	<Controller
66	control={form.control
67	name='name'
68	render={({ field
69	<Field
70	className='col-span-full gap-1'
71	data-invalid={fieldState.invalid
72	>
73	<FieldLabel>Name</FieldLabel
74	<Input
75	{...field}
76	aria-invalid={fieldState.invalid
77	autoFocus
78	onChange={(e)
79	field.onChange(e
80	}}
81	placeholder='My Project'
82	/>
83	<FieldDescription>The name of your project.</FieldDescription
84	{fieldState.invalid &&
85	<FieldError errors={
86	)}
87	</Field>
88	)}
89	/>
90
91	<Controller
92	control={form.control
93	name='description'
94	render={({ field
95	<Field
96	className='col-span-full gap-1'
97	data-invalid={fieldState.invalid
98	>
99	<FieldLabel>Description</FieldLabel
100	<Input
101	{...field}
102	aria-invalid={fieldState.invalid
103	placeholder='Optional description'
104	/>
105	<FieldDescription>
106	A brief description of what this project is about.
107	</FieldDescription>
108	{fieldState.invalid &&
109	<FieldError errors={
110	)}
111	</Field>
112	)}
113	/>
114	<Controller
115	control={form.control
116	name='dueDate'
117	render={({ field
118	<Field
119	className='col-span-full gap-1'
120	data-invalid={fieldState.invalid
121	>
122	<FieldLabel>Due Date</FieldLabel
123	<Popover>
124	<PopoverTrigger asChild>
125	<Button
126	className={cn(
127	'w-full justify-start text-left font-normal',
128	!field.value &&
129	)}
130	size='lg'
131	type='button'
132	variant='outline'
133	>
134	<CalendarIcon className='
135	{field.value
136	? format(field.
137	: 'Pick a date'}
138	</Button>
139	</PopoverTrigger>
140	<PopoverContent align='
141	<Calendar
142	disabled={(date)
143	mode='single'
144	onSelect={field.onChange
145	selected={field.value
146	/>
147	</PopoverContent>
148	</Popover>
149	<FieldDescription>
150	Optional deadline for this project.
151	</FieldDescription>
152	{fieldState.invalid &&
153	<FieldError errors={
154	)}
155	</Field>
156	)}
157	/>
158	</FieldGroup>
159	<DialogFooter>
160	<Button loading={
161	Create Project
162	</Button>
163	<DialogClose asChild>
164	<Button type='
165	Cancel
166	</Button>
167	</DialogClose>
168	</DialogFooter>
169	</form>
170	</DialogContent>
171	</Dialog>
172	)
173	}