Added Copy Image Functionality and added icons to buttons #124
Conversation
|
@max-programming is attempting to deploy a commit to the Github Contributions Chart Team on Vercel. A member of the Team first needs to authorize it. |
max-programming
changed the title
|
With the latest commit, this is how the buttons look like |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@sallar I think that happens because most probably it's not supported on Safari as well. |
| toast("🎉 Copied image!"); | ||
| console.log("copied successfully"); | ||
| } else { | ||
| toast("Sorry, copying image is not supported on this browser"); |
There was a problem hiding this comment.
You can fallback to this solution: https://copee.ceriously.com
There was a problem hiding this comment.
Will do. Thanks
There was a problem hiding this comment.
@styfle Does copee helps with copying images to clipboard? Or just text?
Or do you want me to change this and use try...catch instead
There was a problem hiding this comment.
@max-programming this answer is relevant: https://stackoverflow.com/a/68241516
There was a problem hiding this comment.
@sallar Check it now
There was a problem hiding this comment.
I haven’t tried with an image blob but I suspect it won’t work now that I think about it
There was a problem hiding this comment.
@max-programming @styfle I think it's not that it's not supported, the issue is that the time delay between the click and the copy call is too long and safari blocks it, the blob needs to be ready when the user clicks the button
There was a problem hiding this comment.
src/pages/index.js
Outdated
| IconDownload, | ||
| IconShare, | ||
| IconBrandTwitter | ||
| } from "@tabler/icons"; |
There was a problem hiding this comment.
Are there a lot of icons in this package?
This could cause the bundle to include every icon.
See https://nextjs.org/blog/next-13-1#import-resolution-for-smaller-bundles
There was a problem hiding this comment.
Will take a look if I can make the change
There was a problem hiding this comment.
@styfle I can't find another way to import these icons. Would you like to use a different icon library instead?
There was a problem hiding this comment.
I used the react-icons library which seems more performant. (Using Tabler Icons under the hood)
This is the build command output
Route (pages) Size First Load JS
┌ ○ / 14.3 kB 93.4 kB
├ /_app 0 B 79.1 kB
├ ○ /404 181 B 79.3 kB
├ λ /api/v1/[username] 0 B 79.1 kB
└ λ /api/v1/tweetMedia 0 B 79.1 kB
+ First Load JS shared by all 80.9 kB
├ chunks/framework-114634acb84f8baa.js 45.4 kB
├ chunks/main-ee0cf4b7f81d7c24.js 27.1 kB
├ chunks/pages/_app-3adada8895e66558.js 5.82 kB
├ chunks/webpack-ee7e63bc15b31913.js 815 B
└ css/671175cd27e07421.css 1.81 kB
This PR adds a copy button that copies the image to the clipboard and also shows a toast if it's copied or not.