4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T11b1,"use client"; import { CheckIcon, CopyIcon } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/optics/button"; import { useRender } from "@base-ui/react/use-render"; import { mergeProps } from "@base-ui/react/merge-props"; import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger, } from "@/registry/optics/tabs"; import { ScrollArea } from "@/registry/optics/scroll-area"; import { cn } from "@/registry/optics/lib/utils"; export const Snippet = ({ className = "", ...props }) => ( ); export const SnippetHeader = ({ className = "", ...props }) => (

); export const SnippetCopyButton = ({ render = undefined, value = "", onCopy = undefined, onError = undefined, timeout = 2000, ...props }) => { const [isCopied, setIsCopied] = useState(false); const copyToClipboard = async () => { if (typeof window === "undefined" || !value) return; try { // Try modern clipboard API first if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(value); } else { // Fallback for iOS and older browsers const textArea = document.createElement("textarea"); textArea.value = value; textArea.style.position = "fixed"; textArea.style.opacity = "0"; document.body.appendChild(textArea); textArea.select(); document.execCommand("copy"); document.body.removeChild(textArea); } setIsCopied(true); onCopy?.(); setTimeout(() => setIsCopied(false), timeout); } catch (error) { onError?.(error); } }; const buttonContent = ( <>

Copy to clipboard ); const defaultProps = { variant: "ghost", role: "button", "aria-label": "Copy to clipboard", size: "icon", className: cn("shrink-0"), onClick: copyToClipboard, children: buttonContent, }; if (render) { const element = useRender({ defaultTagName: "button", render: typeof render === "function" ? (props, state) => { const mergedProps = mergeProps("button", defaultProps, props); return render(mergedProps, { isCopied, ...state }); } : render, props: mergeProps("button", defaultProps, props), state: { isCopied, }, }); return element; } return

Code Snippet

Installation

Files

components

Styles