code-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 '@repo/shadcn-ui/lib/utils';
14 
15export type CodeSnippetProps = ComponentProps<typeof Tabs>;
16 
17export const CodeSnippet = ({ className, ...props }: CodeSnippetProps) => (
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 CodeSnippetHeaderProps = HTMLAttributes<HTMLDivElement>;
28 
29export const CodeSnippetHeader = ({ className, ...props }: CodeSnippetHeaderProps) => (
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 CodeSnippetCopyButtonProps = ComponentProps<typeof Button> & {
40  value: string;
41  onCopy?: () => void;
42  onError?: (error: Error) => void;
43  timeout?: number;
44};
45 
46export const CodeSnippetCopyButton = ({
47  asChild,
48  value,
49  onCopy,
50  onError,
51  timeout = 2000,
52  children,
53  ...props
54}: CodeSnippetCopyButtonProps) => {
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 CodeSnippetTabsListProps = ComponentProps<typeof TabsList>;
97 
98export const CodeSnippetTabsList = TabsList;
99 
100export type CodeSnippetTabsTriggerProps = ComponentProps<typeof TabsTrigger>;
101 
102export const CodeSnippetTabsTrigger = ({
103  className,
104  ...props
105}: CodeSnippetTabsTriggerProps) => (
106// … truncated