openstatus.dev
Openstatus
www.openstatus.dev
1import { Link } from "@/components/common/link";
2import { Button } from "@/components/ui/button";
3import {
4 Dialog,
5 DialogContent,
6 DialogDescription,
7 DialogHeader,
8 DialogTitle,
9} from "@/components/ui/dialog";
10import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
11import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
12import type { DialogProps } from "@radix-ui/react-dialog";
13import { Check, Copy } from "lucide-react";
14
15// TODL: make it dynamic
16const YML = `openstatus-marketing:
17 name: OpenStatus Marketing
18 description: Marketing website for OpenStatus
19 active: true
20 public: false
21 frequency: "10m"
22 regions: ["ams", "fra", "gru", "sin", "iad"]
23 kind: "http"
24 request:
25 url: https://api.openstatus.dev
26 method: GET`;
27
28export function ExportCodeDialog(props: DialogProps) {
29 const { copy, isCopied } = useCopyToClipboard();
30
31 return (
32 <Dialog {...props}>
33 <DialogContent>
34 <DialogHeader>
35 <DialogTitle>Export Configuration</DialogTitle>
36 <DialogDescription>
37 Export and manage your monitor configuration using Infra as Code.
38 </DialogDescription>
39 </DialogHeader>
40 <Tabs defaultValue="yml">
41 <TabsList>
42 <TabsTrigger value="yml">YAML</TabsTrigger>
43 <TabsTrigger value="terraform">Terraform</TabsTrigger>
44 </TabsList>
45 <TabsContent value="yml" className="space-y-2">
46 <pre className="relative rounded border bg-muted p-2 text-xs">
47 {YML}
48 <Button
49 variant="outline"
50 size="icon"
51 className="absolute top-2 right-2 size-7 p-1"
52 onClick={() => copy(YML, { withToast: false, timeout: 1000 })}
53 >
54 {isCopied ? (
55 <Check className="size-3" />
56 ) : (
57 <Copy className="size-3" />
58 )}
59 </Button>
60 </pre>
61 <p className="text-muted-foreground text-xs">
62 Use a <code>monitor.openstatus.yml</code> file to configure your
63 monitors. <Link href="#">Read more.</Link>
64 </p>
65 </TabsContent>
66 <TabsContent value="terraform" className="space-y-2">
67 <pre className="relative rounded border bg-muted p-2 text-xs">
68 TODO:
69 </pre>
70 {/* TODO: only showcase if there are any assertions */}
71 <p className="text-destructive text-xs">
72 The Terraform provider does not support assertions yet.
73 </p>
74 <p className="text-muted-foreground text-xs">
75 Use a Terraform provider to manage your monitors.{" "}
76 <Link href="#">Read more.</Link>
77 </p>
78 </TabsContent>
79 </Tabs>
80 </DialogContent>
81 </Dialog>
82 );
83}