openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import {
4 DataTableSheet,
5 DataTableSheetContent,
6 DataTableSheetFooter,
7 DataTableSheetHeader,
8 DataTableSheetTitle,
9} from "@/components/data-table/data-table-sheet";
10import { Button } from "@/components/ui/button";
11import { Separator } from "@/components/ui/separator";
12import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
13import type { RouterOutputs } from "@openstatus/api";
14import type { PrivateLocation } from "@openstatus/db/src/schema";
15import { Check, Copy } from "lucide-react";
16import { DataTableBasics } from "./data-table-basics";
17
18type ResponseLog = RouterOutputs["tinybird"]["get"]["data"][number];
19
20export function Sheet({
21 data,
22 privateLocations,
23 onClose,
24}: {
25 data: ResponseLog | null;
26 privateLocations?: PrivateLocation[];
27 onClose: () => void;
28}) {
29 const { copy, isCopied } = useCopyToClipboard();
30 if (!data) return null;
31
32 return (
33 <DataTableSheet defaultOpen onOpenChange={(open) => !open && onClose()}>
34 <DataTableSheetContent className="sm:max-w-lg">
35 <DataTableSheetHeader className="px-2">
36 <DataTableSheetTitle>Response Logs</DataTableSheetTitle>
37 </DataTableSheetHeader>
38 <DataTableBasics data={data} privateLocations={privateLocations} />
39 <Separator />
40 <DataTableSheetFooter>
41 <Button
42 variant="outline"
43 onClick={() => {
44 if (typeof window !== "undefined") {
45 copy(window.location.href, {
46 withToast: false,
47 });
48 }
49 }}
50 >
51 Copy Request Log URL
52 {isCopied ? <Check /> : <Copy />}
53 </Button>
54 </DataTableSheetFooter>
55 </DataTableSheetContent>
56 </DataTableSheet>
57 );
58}