Skip to content

Add copy-to-clipboard for website color swatches - #191

Open
KrupaPanchal2527 wants to merge 1 commit into
Vibrant-Colors:mainfrom
KrupaPanchal2527:feature/website-swatch-copy
Open

KrupaPanchal2527 wants to merge 1 commit into
Vibrant-Colors:mainfrom
KrupaPanchal2527:feature/website-swatch-copy

Conversation

@KrupaPanchal2527

Copy link
Copy Markdown
Contributor

Title

Add copy-to-clipboard for website color swatches

Summary

This PR improves the homepage demo by letting users copy extracted hex colors directly from the swatch tiles.

  1. Click to copy — Each color swatch is now a button; clicking copies the hex value to the clipboard
  2. Hover affordance — A copy icon appears next to the hex on hover, with a tooltip ("Click to copy") shown after a 1s delay
  3. Copy feedback — After a successful copy, the icon switches to a checkmark and the tooltip shows "Copied!" before resetting
  4. Layout polish — Swatch content is center-aligned; hex codes stay visible while hovering
  5. Reusable utilities — Adds useCopy hook (Clipboard API + legacy fallback) and shared CopyIcon / CheckIcon components under website/src/
Screen.Recording.2026-09-15.at.11.16.01.AM.mov

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant