Skip to content

feat: add copy-to-clipboard button to resource prompt cards - #775

Merged
Aditya948351 merged 2 commits into
Aditya948351:masterfrom
nishupr:feat/copy-resource-code-snippet
Jul 7, 2026
Merged

feat: add copy-to-clipboard button to resource prompt cards#775
Aditya948351 merged 2 commits into
Aditya948351:masterfrom
nishupr:feat/copy-resource-code-snippet

Conversation

@nishupr

@nishupr nishupr commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a functional "Copy" button to the prompt/code cards in the Resources section. Previously, the "Copy" badge was purely decorative (a <span> with no click handler) — users had to manually select and copy the text, which was error-prone for longer prompts.

Changes

  • Replaced the static "Copy" <span> with an interactive <button> in src/components/home/ResourcesTabs.tsx
  • Added handleCopyPrompt, which calls navigator.clipboard.writeText() to copy the prompt's example text
  • Added copiedPromptTitle state to track which specific card was copied, so only that card shows feedback
  • On successful copy, the button swaps to a checkmark icon and "Copied!" label for 2 seconds, then reverts
  • Added a cleanup effect to clear the reset timer on unmount, preventing memory leaks / state updates on unmounted components
  • Reused the same UX pattern already established in src/components/common/CodeBlock.tsx for consistency across the codebase

How to test

  1. Run npm run dev
  2. Navigate to the Resources / AI Prompts section
  3. Hover over any prompt card to reveal the "Copy" button
  4. Click it — confirm the clipboard contains the prompt text and the button shows a "Copied!" checkmark for ~2 seconds before reverting

Screenshots / Recording

Checklist

  • Tested locally with npm run dev
  • No console errors or warnings introduced
  • Follows existing code style/patterns in the repo
  • Linked to the issue below

Related Issue

Closes #751

@github-actions github-actions Bot added good first issue gssoc26 This is a official GirlScript Summer of Code label. level:beginner Beginner level issues type:bug type:feature labels Jul 4, 2026
@Aditya948351 Aditya948351 added the gssoc:approved give 50+ base points label Jul 7, 2026
@Aditya948351
Aditya948351 self-requested a review July 7, 2026 13:49

@Aditya948351 Aditya948351 left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this Issue @nishupr , I will merge this! Keep Growing in Open Source! Good luck !

@Aditya948351
Aditya948351 merged commit ea09f23 into Aditya948351:master Jul 7, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

good first issue gssoc:approved give 50+ base points gssoc26 This is a official GirlScript Summer of Code label. level:beginner Beginner level issues type:bug type:feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] Add "Copy to Clipboard" button to resource code snippets

2 participants