From 276854adc0c74dd27a6ac1c5a9c4daaa2845ae17 Mon Sep 17 00:00:00 2001
From: eshanized <m.eshanized@gmail.com>
Date: Thu, 16 Jan 2025 06:42:25 +0530
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20feat:=20insert=20copy=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/features/ToolCard.tsx | 29 ++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/features/ToolCard.tsx b/src/components/features/ToolCard.tsx
index ae3aac82..c387c5ad 100644
--- a/src/components/features/ToolCard.tsx
+++ b/src/components/features/ToolCard.tsx
@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
-import { Terminal } from 'lucide-react';
+import { Terminal, Clipboard } from 'lucide-react';
+import { useState } from 'react';
 
 interface ToolCardProps {
   name: string;
@@ -9,6 +10,17 @@ interface ToolCardProps {
 }
 
 export function ToolCard({ name, description, category, command }: ToolCardProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(command)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000); // Reset copied status after 2 seconds
+      })
+      .catch((error) => console.error('Failed to copy: ', error));
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -28,7 +40,20 @@ export function ToolCard({ name, description, category, command }: ToolCardProps
 
       <div className="flex items-center justify-between mt-4">
         <span className="text-sm font-medium text-cornflower-blue">{category}</span>
-        <code className="text-sm bg-gray-100 px-3 py-1 rounded text-gray-800">{command}</code>
+        <div className="flex items-center gap-2">
+          <code className="text-sm bg-gray-100 px-3 py-1 rounded text-gray-800">{command}</code>
+          <button
+            onClick={handleCopyClick}
+            className="p-2 bg-cornflower-blue/20 rounded-full hover:bg-cornflower-blue/30 transition-all"
+            aria-label="Copy command"
+          >
+            {copied ? (
+              <span className="text-sm text-cornflower-blue">Copied!</span>
+            ) : (
+              <Clipboard className="h-5 w-5 text-cornflower-blue" />
+            )}
+          </button>
+        </div>
       </div>
     </motion.div>
   );