feat(platform): Add CopySVG icon to the Slug component and update imports

[kriptonian1]

User description

Description

This pull request includes changes to add a copy icon to the Slug component and improve its styling. The most important changes include importing the CopySVG icon, updating the Slug component to use this icon, and modifying the button's styling to enhance user interaction.

Icon Import and Usage:

• apps/platform/public/svg/shared/index.ts: Added CopySVG to the list of imported SVGs and exported it for use in other components. [1] [2]
• apps/platform/src/components/common/slug.tsx: Imported CopySVG and updated the Slug component to include the CopySVG icon next to the text. [1] [2]

Styling Improvements:

• apps/platform/src/components/common/slug.tsx: Modified the button's class to include cursor-copy, gap-2, and hover:bg-white/15 for better visual feedback and spacing.
  

Mentions

@rajdip-b @poswalsameer

Screenshots of relevant screens

forgot to click one, but trust me you will love it

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• My changes are breaking another fix/feature of the project
• I have added test cases to show that my feature works
• I have added relevant screenshots in my PR
• There are no UI/UX issues

Documentation Update

• This PR requires an update to the documentation at docs.keyshade.xyz
• I have made the necessary updates to the documentation, or no documentation changes are required.

---

PR Type

Enhancement

---

Description

• Added CopySVG icon to the Slug component.

• Updated Slug component styling for better user interaction.

• Imported and exported CopySVG in shared SVG index.

---

Changes walkthrough 📝

Relevant files

Enhancement

index.ts Add `CopySVG` to shared SVG index                                                apps/platform/public/svg/shared/index.ts Added CopySVG import and export to shared SVG index. Updated export list to include CopySVG. +3/-1      slug.tsx Update `Slug` component with `CopySVG` and styling              apps/platform/src/components/common/slug.tsx Imported CopySVG for use in the Slug component. Enhanced Slug component styling with new classes. Added CopySVG icon next to the text in the button. +4/-3

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ No major issues detected

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
General	Add accessibility attributes Add aria-label to the button to improve accessibility for screen readers, since it's a copy button with an icon. apps/platform/src/components/common/slug.tsx [25-29] <button className={`${roboto.className} flex cursor-copy gap-2 rounded-lg bg-white/10 px-3 py-2 font-mono text-sm text-white/50 hover:bg-white/15`} onClick={copyToClipboard} type="button" + aria-label={`Copy ${text}`} > Apply this suggestion Suggestion importance[1-10]: 8 Why: Adding an aria-label to the copy button is crucial for accessibility, as it helps screen reader users understand the button's purpose and what text will be copied. This is especially important since the button contains both text and an icon.	8

[rajdip-b]

Ser screenshot plis

[rajdip-b]

🎉 This PR is included in version 2.11.0-stage.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀