Implement a unified CopyButton component across all tools

[rishima17]

Summary
Currently, over 100+ tools in the repository implement their own "Copy to Clipboard" logic. This creates code duplication and UI inconsistency. We need a single, reusable CopyButton component to standardize this behavior.

Requirements
Props:
text: The string to be copied.
variant: icon (default) or text (for labeled buttons).
className: For custom positioning.
Behavior:
Uses navigator.clipboard.writeText.
Displays a "Copied!" toast using the existing react-toastify configuration.
Temporarily changes the icon to a "Check" mark for visual feedback.
Scope: Once built, replace the custom copy logic in a few sample tools (e.g., wordCounterComponent, jsonToTxt) to demonstrate usage.
Technical Implementation Details
File Path: app/components/theme/ui/CopyButton.tsx
Dependencies: Phosphor Icons (already in
package.json
).

[HarrysonLadines]

Hi @rishima17, I'd like to work on this. Could you assign it to me?

[rishima17]

@HarrysonLadines Hey, please make sure to carefully follow the contribution guidelines mentioned in the repository before making your PR. It helps maintain code quality and makes the review process smoother.

[rishima17]

Please raise the PR against the develop branch, not the main branch. @HarrysonLadines

[github-actions]

🎉 This issue has been resolved in version 1.4.0-develop.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[SyedFahad7]

Great work on standardizing the copy logic and introducing a reusable CopyButton component @HarrysonLadines

The implementation is clean, properly typed, and integrates well with the existing UI system. I also appreciate the manual testing notes and screenshots.