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) => (
+
+
+ {message}
+
+
+
+);
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
+
+ {showToast && (
+ setShowToast(false)}
+ />
+ )}
);
}