Openstatus
www.openstatus.dev
1"use client";
2
3import { FormCard, FormCardGroup } from "@/components/forms/form-card";
4import {
5 FormSheetContent,
6 FormSheetDescription,
7 FormSheetFooter,
8 FormSheetHeader,
9 FormSheetTitle,
10 FormSheetTrigger,
11 FormSheetWithDirtyProtection,
12} from "@/components/forms/form-sheet";
13import {
14 FormPrivateLocation,
15 type FormValues,
16} from "@/components/forms/private-location/form";
17import { Button } from "@/components/ui/button";
18import { useState } from "react";
19
20export function FormSheetPrivateLocation({
21 children,
22 defaultValues,
23 onSubmit,
24 monitors,
25 ...props
26}: Omit<React.ComponentProps<typeof FormSheetTrigger>, "onSubmit"> & {
27 defaultValues?: FormValues;
28 monitors: { id: number; name: string; url: string }[];
29 onSubmit: (values: FormValues) => Promise<void>;
30}) {
31 const [open, setOpen] = useState(false);
32
33 return (
34 <FormSheetWithDirtyProtection open={open} onOpenChange={setOpen}>
35 <FormSheetTrigger {...props} asChild>
36 {children}
37 </FormSheetTrigger>
38 <FormSheetContent>
39 <FormSheetHeader>
40 <FormSheetTitle>Private Location</FormSheetTitle>
41 <FormSheetDescription>
42 Configure and update the private location.
43 </FormSheetDescription>
44 </FormSheetHeader>
45 <FormCardGroup className="overflow-y-auto">
46 <FormCard className="overflow-auto rounded-none border-none">
47 <FormPrivateLocation
48 monitors={monitors}
49 onSubmit={async (values) => {
50 await onSubmit(values);
51 setOpen(false);
52 }}
53 defaultValues={defaultValues}
54 id="private-location-form"
55 className="my-4"
56 />
57 </FormCard>
58 </FormCardGroup>
59 <FormSheetFooter>
60 <Button type="submit" form="private-location-form">
61 Submit
62 </Button>
63 </FormSheetFooter>
64 </FormSheetContent>
65 </FormSheetWithDirtyProtection>
66 );
67}