From 40464601b30158144e8a6ad174b594156de98827 Mon Sep 17 00:00:00 2001
From: Duc Ho <hotienduc05012002@gmail.com>
Date: Mon, 26 Aug 2024 22:57:27 -0600
Subject: [PATCH] Added toast and copy id functionality

---
 src/components/MediaCard.tsx           | 14 ++++++++++----
 src/routes/test/MediaCardTestRoute.tsx |  8 ++++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/MediaCard.tsx b/src/components/MediaCard.tsx
index a23f7a3..44f6787 100644
--- 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
index 7d7bdf2..59bbbd8 100644
--- 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"