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.
1.0 kB · 41 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142"use client";
import { Check, Copy } from "@openstatus/icons";import { Button } from "@openstatus/ui/components/ui/button";import { useCopyToClipboard } from "@openstatus/ui/hooks/use-copy-to-clipboard";import { cn } from "@openstatus/ui/lib/utils";
export function Code({ children, className, ...props}: React.ComponentProps<"pre">) { const { copy, isCopied } = useCopyToClipboard();
return ( <div className="relative"> <pre className={cn( "bg-muted overflow-x-auto rounded-md border p-2 text-xs", className, )} {...props} > {children} </pre> <Button variant="outline" size="icon" className="absolute top-1 right-1 size-6 p-1 backdrop-blur-md" onClick={() => copy(children?.toString() ?? "", { withToast: false, timeout: 1000, }) } > {isCopied ? <Check className="size-3" /> : <Copy className="size-3" />} </Button> </div> );}