snippet

1"use client";
2 
3import { CheckIcon, CopyIcon } from "lucide-react";
4import {
5  type ComponentProps,
6  cloneElement,
7  type HTMLAttributes,
8  type ReactElement,
9  useState,
10} from "react";
11import { Button } from "@/components/ui/button";
12import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
13import { cn } from "@/lib/utils";
14 
15export type SnippetProps = ComponentProps<typeof Tabs>;
16 
17export const Snippet = ({ className, ...props }: SnippetProps) => (
18  <Tabs
19    className={cn(
20      "group w-full gap-0 overflow-hidden rounded-md border",
21      className
22    )}
23    {...props}
24  />
25);
26 
27export type SnippetHeaderProps = HTMLAttributes<HTMLDivElement>;
28 
29export const SnippetHeader = ({ className, ...props }: SnippetHeaderProps) => (
30  <div
31    className={cn(
32      "flex flex-row items-center justify-between border-b bg-secondary p-1",
33      className
34    )}
35    {...props}
36  />
37);
38 
39export type SnippetCopyButtonProps = ComponentProps<typeof Button> & {
40  value: string;
41  onCopy?: () => void;
42  onError?: (error: Error) => void;
43  timeout?: number;
44};
45 
46export const SnippetCopyButton = ({
47  asChild,
48  value,
49  onCopy,
50  onError,
51  timeout = 2000,
52  children,
53  ...props
54}: SnippetCopyButtonProps) => {
55  const [isCopied, setIsCopied] = useState(false);
56 
57  const copyToClipboard = () => {
58    if (
59      typeof window === "undefined" ||
60      !navigator.clipboard.writeText ||
61      !value
62    ) {
63      return;
64    }
65 
66    navigator.clipboard.writeText(value).then(() => {
67      setIsCopied(true);
68      onCopy?.();
69 
70      setTimeout(() => setIsCopied(false), timeout);
71    }, onError);
72  };
73 
74  if (asChild) {
75    return cloneElement(children as ReactElement, {
76      // @ts-expect-error - we know this is a button
77      onClick: copyToClipboard,
78    });
79  }
80 
81  const icon = isCopied ? <CheckIcon size={14} /> : <CopyIcon size={14} />;
82 
83  return (
84    <Button
85      className="opacity-0 transition-opacity group-hover:opacity-100"
86      onClick={copyToClipboard}
87      size="icon"
88      variant="ghost"
89      {...props}
90    >
91      {children ?? icon}
92    </Button>
93  );
94};
95 
96export type SnippetTabsListProps = ComponentProps<typeof TabsList>;
97 
98export const SnippetTabsList = TabsList;
99 
100export type SnippetTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
101 
102export const SnippetTabsTrigger = ({
103  className,
104  ...props
105}: SnippetTabsTriggerProps) => (
106  <TabsTrigger className={cn("gap-1.5", className)} {...props} />
107);
108 
109// … truncated