Copy to Clipboard Button Component

I'll create a reusable "Copy to Clipboard" button component that can be used within code blocks. This component will use shadcn/ui components and Tailwind CSS for styling.

Component Features

The CopyButton component I've created includes:

1. Visual Feedback:

   • Changes from a copy icon to a check icon when text is copied
   • Uses a tooltip that updates from "Copy" to "Copied!" after clicking

2. Customization Options:

   • copyTimeout: Customize how long the "Copied" state remains (default: 2000ms)
   • variant: Choose button style ("default", "outline", "ghost")
   • size: Control button size ("default", "sm", "icon")
   • iconSize: Adjust the icon size
   • className: Add custom classes for further styling

3. Accessibility:

   • Proper aria-label that updates based on copy state
   • Focus indicators for keyboard navigation
   • Tooltip for additional context

4. Integration:

   • Designed to work seamlessly within code blocks
   • Also works as a standalone component

I've also included a CodeBlock component that demonstrates how to integrate the copy button within a code display, plus an example page showing various usage scenarios.

How It Works

1. The component uses React's useState to track whether text has been copied
2. When clicked, it copies the provided text to the clipboard using the Clipboard API
3. After copying, it shows the "Copied" state for the specified duration
4. The tooltip provides additional user feedback

This implementation is clean, reusable, and follows best practices for both React and accessibility.