add share agent button

src/app/(main)/explore/_components/agent-card.tsx

@@ -5,14 +5,15 @@ import Image from "next/image";
 
 import { motion } from "framer-motion";
 
-import { Play } from "lucide-react";
+import { Play, Share, Share2 } from "lucide-react";
 
 import { formatDate } from "@/lib/utils";
 
 import { Tables } from "@/utils/supabase/database.types";
 
 import { Badge } from "@/components/ui/badge";
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { toast } from "sonner";
 
 const ease = [0.16, 1, 0.3, 1];
 
@@ -65,11 +66,22 @@ export default function AgentCard(props: AgentCardProps) {
       </div>
       <h3 className="text-xl font-semibold mb-2 truncate">{name}</h3>
       <p className="text-sm text-foreground line-clamp-3 mb-4">{description}</p>
-      <div className="mt-auto grid">
+      <div className="mt-auto grid sm:grid-cols-2 gap-2">
+        <Button
+          variant={"outline"}
+          onClick={() => {
+            navigator.clipboard.writeText(`https://beactio.ai/agents/${id}`);
+            // navigator.clipboard.writeText(`http://localhost:3000/agents/${id}`);
+            toast.info("Copied to clipboard!");
+          }}
+        >
+          <Share2 className="h-4 w-4 mr-2" />
+          <span>Share</span>
+        </Button>
         <Link
           href={`/agents/${id}`}
           target="blank"
-          className={buttonVariants({ variant: "outline" })}
+          className={buttonVariants({ variant: "default" })}
         >
           <Play className="h-4 w-4 mr-2" />
           <span>Try it</span>