openstatus.dev
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 FormStatusReport,
15 type FormValues,
16} from "@/components/forms/status-report/form";
17import { Button } from "@/components/ui/button";
18import { Separator } from "@/components/ui/separator";
19import type { PageComponent } from "@openstatus/db/src/schema";
20import { useState } from "react";
21
22export function FormSheetStatusReport({
23 children,
24 defaultValues,
25 onSubmit,
26 pageComponents,
27 warning,
28}: Omit<React.ComponentProps<typeof FormSheetTrigger>, "onSubmit"> & {
29 defaultValues?: FormValues;
30 onSubmit: (values: FormValues) => Promise<void>;
31 pageComponents: Pick<PageComponent, "id" | "name" | "type">[];
32 warning?: React.ReactNode;
33}) {
34 const [open, setOpen] = useState(false);
35
36 return (
37 <FormSheetWithDirtyProtection open={open} onOpenChange={setOpen}>
38 <FormSheetTrigger asChild>{children}</FormSheetTrigger>
39 <FormSheetContent className="sm:max-w-lg">
40 <FormSheetHeader>
41 <FormSheetTitle>Status Report</FormSheetTitle>
42 <FormSheetDescription>
43 Configure and update the status of your report.
44 </FormSheetDescription>
45 </FormSheetHeader>
46 {warning ? (
47 <>
48 <p className="px-4 py-4 text-sm text-warning">{warning}</p>
49 <Separator />
50 </>
51 ) : null}
52 <FormCardGroup className="overflow-y-scroll">
53 <FormCard className="overflow-auto rounded-none border-none">
54 <FormStatusReport
55 id="status-report-form"
56 className="my-4"
57 onSubmit={async (values) => {
58 await onSubmit(values);
59 setOpen(false);
60 }}
61 defaultValues={defaultValues}
62 pageComponents={pageComponents}
63 />
64 </FormCard>
65 </FormCardGroup>
66 <FormSheetFooter>
67 <Button type="submit" form="status-report-form">
68 Submit
69 </Button>
70 </FormSheetFooter>
71 </FormSheetContent>
72 </FormSheetWithDirtyProtection>
73 );
74}