Added toast and copy id functionality

UofA-Blueprint · Aug 27, 2024 · 4046460 · 4046460
1 parent 56251dd
commit 4046460
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/MediaCard.tsx b/src/components/MediaCard.tsx
@@ -1,3 +1,4 @@
+import { displayToast } from "@/utils";
 import { Copy } from "@phosphor-icons/react";
 
 interface MediaCardProps {
@@ -14,6 +15,10 @@ const options: Intl.DateTimeFormatOptions = {
 };
 
 function MediaCard({ src, title, date, id }: MediaCardProps) {
+	const copyHandler = () => {
+		navigator.clipboard.writeText(id.toString());
+		displayToast("ID Copied!", "success");
+	};
 	return (
 		<div className=" flex flex-col rounded-lg">
 			<div className="relative rounded-lg">
@@ -31,11 +36,12 @@ function MediaCard({ src, title, date, id }: MediaCardProps) {
 					</span>
 					<div className="flex items-center gap-2">
 						<span className="text-sm text-neutrals-dark-300">
-							Id: {id}
+							ID: {id}
 						</span>
-						<button>
-							<Copy></Copy>
-						</button>
+						<Copy
+							className="hover:cursor-pointer"
+							onClick={copyHandler}
+						></Copy>
 					</div>
 				</div>
 			</div>

diff --git a/src/routes/test/MediaCardTestRoute.tsx b/src/routes/test/MediaCardTestRoute.tsx
@@ -1,8 +1,16 @@
 import MediaCard from "@/components/MediaCard";
+import { ToastContainer } from "react-toastify";
 
 function MediaCardTestRoute() {
 	return (
 		<div className="bg-blue-200 min-h-screen flex justify-center items-center p-4">
+			<ToastContainer
+				position="bottom-right"
+				autoClose={2000}
+				newestOnTop={true}
+				closeButton={false}
+				hideProgressBar={true}
+			/>
 			<div className="grid grid-cols-3 gap-4">
 				<MediaCard
 					src="https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c"