diff --git a/package.json b/package.json index a31178a..4f16dde 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-slick": "^0.30.2", "react-super-responsive-table": "^6.0.0", "react-tiny-oembed": "^1.1.0", + "react-toastify": "^11.0.2", "react-youtube": "^10.1.0", "react-zendesk": "^0.1.13", "sharp": "^0.33.5", diff --git a/src/components/elements/favorites-list.tsx b/src/components/elements/favorites-list.tsx index 34e0e0d..a2e57b4 100644 --- a/src/components/elements/favorites-list.tsx +++ b/src/components/elements/favorites-list.tsx @@ -7,6 +7,7 @@ import {XMarkIcon} from "@heroicons/react/20/solid" import {H2} from "./headers" import {clsx} from "clsx" import {twMerge} from "tailwind-merge" +import {ToastContainer, toast} from "react-toastify" const ShareButtons = () => { const [, copy] = useCopyToClipboard() @@ -15,8 +16,11 @@ const ShareButtons = () => { const urlParams = `/courses/favorites?favs=${favs.map(fav => `${fav.uuid}`).join(",")}` const copyUrl = isClient ? window.location.origin + urlParams : urlParams + const notify = () => toast("Copied!") + const copyToClip = (text: string) => { copy(text).catch(_e => console.warn("An error occurred when copying to clipboard")) + notify() } const smsCopy = @@ -33,53 +37,67 @@ const ShareButtons = () => { ) return ( -
- - - -
+ <> +
+ + + +
+ + ) } diff --git a/yarn.lock b/yarn.lock index 238bc9e..d79fd54 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14697,6 +14697,18 @@ __metadata: languageName: node linkType: hard +"react-toastify@npm:^11.0.2": + version: 11.0.2 + resolution: "react-toastify@npm:11.0.2" + dependencies: + clsx: "npm:^2.1.1" + peerDependencies: + react: ^18 || ^19 + react-dom: ^18 || ^19 + checksum: 10c0/e1ba01846782d47d0bf9cec7e2b4804f9af30e50a203786523f16db33691c1491f2382832e7ec4b69c583d3634ea0e3efb383da00ca9076bcf4bdd906a54a85f + languageName: node + linkType: hard + "react-youtube@npm:^10.1.0": version: 10.1.0 resolution: "react-youtube@npm:10.1.0" @@ -16192,6 +16204,7 @@ __metadata: react-slick: "npm:^0.30.2" react-super-responsive-table: "npm:^6.0.0" react-tiny-oembed: "npm:^1.1.0" + react-toastify: "npm:^11.0.2" react-youtube: "npm:^10.1.0" react-zendesk: "npm:^0.1.13" sharp: "npm:^0.33.5"