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.
4.0 kB · 140 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141"use client";
import { zodResolver } from "@hookform/resolvers/zod";import { Lock } from "@openstatus/icons";import { Button } from "@openstatus/ui/components/ui/button";import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel,} from "@openstatus/ui/components/ui/form";import { Switch } from "@openstatus/ui/components/ui/switch";import NextLink from "next/link";import { useTransition } from "react";import { useForm } from "react-hook-form";import { toast } from "sonner";import { z } from "zod";
import { Link } from "@/components/common/link";import { FormCard, FormCardContent, FormCardDescription, FormCardFooter, FormCardFooterInfo, FormCardHeader, FormCardTitle, FormCardUpgrade,} from "@/components/forms/form-card";
const schema = z.object({ visibility: z.boolean(),});
type FormValues = z.infer<typeof schema>;
export function FormVisibility({ locked, defaultValues, onSubmit, ...props}: Omit<React.ComponentProps<"form">, "onSubmit"> & { locked?: boolean; defaultValues?: FormValues; onSubmit: (values: FormValues) => Promise<void>;}) { const form = useForm<FormValues>({ resolver: zodResolver(schema), defaultValues: defaultValues ?? { visibility: false, }, }); const [isPending, startTransition] = useTransition();
function submitAction(values: FormValues) { if (isPending) return;
startTransition(async () => { try { const promise = onSubmit(values); toast.promise(promise, { loading: "Saving...", success: "Saved", error: "Failed to save", }); await promise; } catch (error) { console.error(error); } }); }
return ( <Form {...form}> <form onSubmit={form.handleSubmit(submitAction)} {...props}> <FormCard> {locked ? <FormCardUpgrade /> : null} <FormCardHeader> <FormCardTitle>Visibility</FormCardTitle> <FormCardDescription> Share your monitor stats with the public. </FormCardDescription> </FormCardHeader> <FormCardContent> <FormField control={form.control} name="visibility" disabled={locked} render={({ field }) => ( <FormItem className="flex flex-row items-center justify-between"> <div className="space-y-0.5"> <FormLabel>Allow public access</FormLabel> <FormDescription> Change monitor visibility. The monitor stats will be attached to the status page the monitor is connected to. </FormDescription> </div> <FormControl> <Switch checked={field.value} onCheckedChange={field.onChange} disabled={locked} /> </FormControl> </FormItem> )} /> </FormCardContent> <FormCardFooter> <FormCardFooterInfo> Learn more about{" "} <Link href="https://www.openstatus.dev/docs/reference/http-monitor/#public" rel="noreferrer" target="_blank" > monitor visibility </Link> . </FormCardFooterInfo> {locked ? ( <Button asChild> <NextLink href="/settings/billing"> <Lock className="size-4" /> Upgrade </NextLink> </Button> ) : ( <Button type="submit" disabled={isPending}> {isPending ? "Submitting..." : "Submit"} </Button> )} </FormCardFooter> </FormCard> </form> </Form> );}