Copy to clipboard component

[noams24]

When pressing on the "Share" button, copy the solution URL to the clipboard, and a messages pops and saying "Copied!"

Example in Leetcode: https://leetcode.com/problems/two-sum/description/

link to component: https://github.com/noams24/Kef-Code/blob/main/src/layouts/components/workSpace/solutionSection/SolutionSection.tsx

In line 213: ` {isCopied && (

הכתובת הועתקה!

  )}`

Bonus: add animation

[codeomi]

Hi, with handleShare function @noams24 seems to be have taken care of the issue. I guess now you can delete the copyToClipboard function used on line : 160 which serves no purpose on the current code and used no where.

You can add animation to the text which shows when copied by adding some transition to it, since it is only visible for 2 seconds adding anything more serves no purpose to it (simple yet elegant).

Feel free to tag me if any more issues arrive.

[noams24]

@codeomi Oops I forgot to delete those lines lol. I want the component to be fixed under the header, like in LeetCode. Currently it looks like this:

[codeomi]

@noams24 No worries, can you send me the URL to the component where it is used in UI (having trouble due to language gap). So that I can paste it ahead of localhost.

[codeomi]

Hey @noams24, I have understood your requirement regarding a pop up to be displayed whenever uses clicks on the share button.

What you can do is use snackbar from the Material UI library, which is fairly easy to use.

Steps:-

• npm i @mui/material @emotion/react @emotion/styled
• Make a common component for the pop up to show (https://mui.com/material-ui/react-snackbar/)
• Use dynamic props according the message you want to show and the theme

[noams24]

@codeomi Good solution, thanks!