🚀 feat: add a toast notification

Author: eshanized

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>
+);

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>
   );
 }