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.4 kB · 80 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081"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 { type DeclareIncidentValues, FormDeclareIncident, type FormValues,} from "./form";
export function FormSheetDeclareIncident({ children, open: controlledOpen, onOpenChange, defaultValues, onSubmit, footer, slack,}: { children?: React.ReactNode; open?: boolean; onOpenChange?: (open: boolean) => void; defaultValues?: Partial<FormValues>; onSubmit: (values: DeclareIncidentValues) => Promise<void>; footer?: React.ReactNode; slack: "ready" | "reconnect" | "disconnected";}) { const [internalOpen, setInternalOpen] = useState(false); const open = controlledOpen ?? internalOpen; const setOpen = onOpenChange ?? setInternalOpen;
return ( <FormSheetWithDirtyProtection open={open} onOpenChange={setOpen}> {children ? ( <FormSheetTrigger asChild>{children}</FormSheetTrigger> ) : null} <FormSheetContent className="sm:max-w-lg"> <FormSheetHeader> <FormSheetTitle>Declare incident</FormSheetTitle> <FormSheetDescription> An internal record for the team: severity, commander and a timeline. Nothing is published until you create a status report. </FormSheetDescription> </FormSheetHeader> <FormCardGroup className="overflow-y-scroll"> <FormCard className="overflow-auto rounded-none border-none"> <FormDeclareIncident id="declare-incident-form" className="my-4" defaultValues={defaultValues} slack={slack} onSubmit={async (values) => { await onSubmit(values); setOpen(false); }} /> </FormCard> </FormCardGroup> {footer} <FormSheetFooter> <Button type="submit" form="declare-incident-form"> Declare </Button> </FormSheetFooter> </FormSheetContent> </FormSheetWithDirtyProtection> );}