updateEE

src/app/_components/group/group-card.tsx

@@ -1,5 +1,7 @@
+"use client";
 import Avatar from "@/components/avatar";
 import { Icons } from "@/components/icons";
+import { Button } from "@/components/ui/button";
 import {
   Card,
   CardDescription,
@@ -7,11 +9,11 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import type { Group } from "@/server/db/schema";
-import type { User } from "@clerk/nextjs/server";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import React from "react";
 
 function GroupCard({ group }: { group: Group }) {
+  const router = useRouter();
   return (
     <Card>
       <CardHeader className="flex items-center justify-between">
@@ -52,13 +54,16 @@ function GroupCard({ group }: { group: Group }) {
             <p>{group.description}</p>
           </CardDescription>
         </div>
-        <Link
-          className="cursor-pointer h-max flex items-center border bg-foreground text-background  rounded-lg pl-4  w-24 justify-between"
-          href={"/add"}
+        <Button
+          className=" h-max flex items-center  bg-foreground text-background  rounded-lg pl-4  w-24 justify-between"
+          onClick={(e) => {
+            e.preventDefault();
+            router.push(`/add?groupId=${group.id}`);
+          }}
         >
           <span>Add</span>
           <Icons.addSquare className="size-8" />
-        </Link>
+        </Button>
       </CardHeader>
     </Card>
   );