From b383fd495baa8224f7fc342e073b991d416c302b Mon Sep 17 00:00:00 2001
From: eshanized <m.eshanized@gmail.com>
Date: Thu, 16 Jan 2025 06:48:31 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat:=20add=20a=20toast=20notifi?=
 =?UTF-8?q?cation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/features/Toast.tsx    | 28 ++++++++++++++++++++++++++++
 src/components/features/ToolCard.tsx | 15 ++++++++++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/components/features/Toast.tsx

diff --git a/src/components/features/Toast.tsx b/src/components/features/Toast.tsx
new file mode 100644
index 00000000..062ad914
--- /dev/null
+++ b/src/components/features/Toast.tsx
@@ -0,0 +1,28 @@
+// Toast.tsx
+import { motion } from 'framer-motion';
+
+interface ToastProps {
+  message: string;
+  onClose: () => void;
+}
+
+export const Toast = ({ message, onClose }: ToastProps) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    exit={{ opacity: 0, y: 20 }}
+    transition={{ duration: 0.3 }}
+    className="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-cornflower-blue text-white px-4 py-2 rounded-lg shadow-lg"
+  >
+    <div className="flex items-center gap-2">
+      <span>{message}</span>
+    </div>
+    <button
+      onClick={onClose}
+      className="absolute top-0 right-0 p-1 text-white hover:bg-cornflower-blue/80 rounded-full"
+      aria-label="Close toast"
+    >
+      &times;
+    </button>
+  </motion.div>
+);
diff --git a/src/components/features/ToolCard.tsx b/src/components/features/ToolCard.tsx
index c387c5ad..c5e8b1fb 100644
--- a/src/components/features/ToolCard.tsx
+++ b/src/components/features/ToolCard.tsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
 import { Terminal, Clipboard } from 'lucide-react';
 import { useState } from 'react';
+import { Toast } from './Toast'; // Make sure to import the Toast component
 
 interface ToolCardProps {
   name: string;
@@ -11,12 +12,17 @@ interface ToolCardProps {
 
 export function ToolCard({ name, description, category, command }: ToolCardProps) {
   const [copied, setCopied] = useState(false);
+  const [showToast, setShowToast] = useState(false);
 
   const handleCopyClick = () => {
     navigator.clipboard.writeText(command)
       .then(() => {
         setCopied(true);
-        setTimeout(() => setCopied(false), 2000); // Reset copied status after 2 seconds
+        setShowToast(true);
+        setTimeout(() => {
+          setCopied(false);
+          setShowToast(false);
+        }, 3000); // Hide toast after 3 seconds
       })
       .catch((error) => console.error('Failed to copy: ', error));
   };
@@ -55,6 +61,13 @@ export function ToolCard({ name, description, category, command }: ToolCardProps
           </button>
         </div>
       </div>
+
+      {showToast && (
+        <Toast
+          message="Command copied! Paste it in your terminal with Ctrl + Shift + V (Cmd + Shift + V on Mac)"
+          onClose={() => setShowToast(false)}
+        />
+      )}
     </motion.div>
   );
 }