"use client"; import { CheckIcon, CopyIcon } from "lucide-react"; import { type ComponentProps, cloneElement, type HTMLAttributes, type ReactElement, useState, } from "react"; import { Button } from "@/components/ui/button"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; export type SnippetProps = ComponentProps; export const Snippet = ({ className, ...props }: SnippetProps) => ( ); export type SnippetHeaderProps = HTMLAttributes; export const SnippetHeader = ({ className, ...props }: SnippetHeaderProps) => (

); export type SnippetCopyButtonProps = ComponentProps & { value: string; onCopy?: () => void; onError?: (error: Error) => void; timeout?: number; }; export const SnippetCopyButton = ({ asChild, value, onCopy, onError, timeout = 2000, children, ...props }: SnippetCopyButtonProps) => { const [isCopied, setIsCopied] = useState(false); const copyToClipboard = () => { if ( typeof window === "undefined" || !navigator.clipboard.writeText || !value ) { return; } navigator.clipboard.writeText(value).then(() => { setIsCopied(true); onCopy?.(); setTimeout(() => setIsCopied(false), timeout); }, onError); }; if (asChild) { return cloneElement(children as ReactElement, { // @ts-expect-error - we know this is a button onClick: copyToClipboard, }); } const icon = isCopied ? : ; return ( ); }; export type SnippetTabsListProps = ComponentProps; export const SnippetTabsList = TabsList; export type SnippetTabsTriggerProps = ComponentProps; export const SnippetTabsTrigger = ({ className, ...props }: SnippetTabsTriggerProps) => ( ); export type SnippetTabsContentProps = ComponentProps; export const SnippetTabsContent = ({ className, children, ...props }: SnippetTabsContentProps) => (

{children}

);

snippet

Instalação

Dependências

Registry dependencies