Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
2.9 kB · 89 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990"use client";
import { Button } from "@openstatus/ui/components/ui/button";import { useState } from "react";
import { FormCard, FormCardGroup } from "@/components/forms/form-card";import { FormSheetContent, FormSheetDescription, FormSheetFooter, FormSheetHeader, FormSheetTitle, FormSheetTrigger, FormSheetWithDirtyProtection,} from "@/components/forms/form-sheet";import { config } from "@/data/notifications.client";
import type { FormValues } from "./form";
export function FormSheetNotifier({ children, defaultValues, provider, onSubmit, monitors, defaultOpen, ...props}: Omit<React.ComponentProps<typeof FormSheetTrigger>, "onSubmit"> & { defaultValues?: FormValues; provider: FormValues["provider"]; onSubmit?: (values: FormValues) => Promise<void>; monitors: { id: number; name: string }[]; defaultOpen?: boolean;}) { const [open, setOpen] = useState(defaultOpen ?? false); const Form = provider ? config[provider].form : undefined;
return ( <FormSheetWithDirtyProtection open={open} onOpenChange={setOpen}> <FormSheetTrigger {...props} asChild> {children} </FormSheetTrigger> <FormSheetContent className="sm:max-w-lg"> <FormSheetHeader> <FormSheetTitle>Notifier</FormSheetTitle> <FormSheetDescription> Configure and update the notifier. </FormSheetDescription> </FormSheetHeader> <FormCardGroup className="overflow-y-auto"> <FormCard className="overflow-auto rounded-none border-none"> {Form && ( <Form id={`notifier-form-${provider}`} className="my-4" onSubmit={async (values) => { await onSubmit?.(values); setOpen(false); }} // @ts-expect-error - defaultValues is not defined in the form component defaultValues={ defaultValues ? { ...defaultValues, data: typeof defaultValues?.data === "string" ? defaultValues?.data : defaultValues?.data && typeof defaultValues.data === "object" && provider in defaultValues.data ? defaultValues.data[provider] : defaultValues?.data, } : undefined } monitors={monitors} /> )} </FormCard> </FormCardGroup> <FormSheetFooter> <Button type="submit" form={`notifier-form-${provider}`}> Submit </Button> </FormSheetFooter> </FormSheetContent> </FormSheetWithDirtyProtection> );}