openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import { Button } from "@/components/ui/button";
4import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
5import { cn } from "@/lib/utils";
6import { Check, Copy } from "lucide-react";
7
8export function Code({
9 children,
10 className,
11 ...props
12}: React.ComponentProps<"pre">) {
13 const { copy, isCopied } = useCopyToClipboard();
14
15 return (
16 <div className="relative">
17 <pre
18 className={cn(
19 "overflow-x-auto rounded-md border bg-muted p-2 text-xs",
20 className,
21 )}
22 {...props}
23 >
24 {children}
25 </pre>
26 <Button
27 variant="outline"
28 size="icon"
29 className="absolute top-1 right-1 size-6 p-1 backdrop-blur-md"
30 onClick={() =>
31 copy(children?.toString() ?? "", {
32 withToast: false,
33 timeout: 1000,
34 })
35 }
36 >
37 {isCopied ? <Check className="size-3" /> : <Copy className="size-3" />}
38 </Button>
39 </div>
40 );
41}