Develop a reusable React component for a 'copy to clipboard' button, suitable for use within code blocks. The button should be compact, utilizing an icon to represent its function. Implement a tooltip to provide user feedback, displaying 'Copy' initially and changing to 'Copied' upon successful copy. The component should allow customization of the duration for which the 'Copied' feedback is displayed. Ensure the component is accessible and visually integrates well with code block styling. Use shadcn and tailwind.
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.
The CopyButton component I've created includes:
Visual Feedback:
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 sizeclassName: Add custom classes for further stylingAccessibility:
Integration:
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.
useState to track whether text has been copiedThis implementation is clean, reusable, and follows best practices for both React and accessibility.