main page and group car

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

@@ -1,12 +1,64 @@
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import Avatar from "@/components/avatar";
+import { Icons } from "@/components/icons";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  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 React from "react";
 
 function GroupCard({ group }: { group: Group }) {
   return (
     <Card>
-      <CardHeader>
-        <CardTitle>{group.name}</CardTitle>
+      <CardHeader className="flex items-center justify-between">
+        <div className=" flex flex-col gap-2">
+          <div className="flex items-center gap-4">
+            <CardTitle className="flex items-center gap-1">
+              <Icons.group className="size-4" />
+              <span>{group.name}</span>
+            </CardTitle>
+            <ul className="flex ">
+              {group?.members?.slice(0, 4)?.map(({ user }, idx) => (
+                <li
+                  key={idx}
+                  style={{
+                    transform: `translateX(-${idx * 4}px)`,
+                  }}
+                >
+                  <Avatar
+                    src={user?.image}
+                    fb={user?.name}
+                    className="size-4"
+                  />
+                </li>
+              ))}
+              {Number(group?.members?.length) > 4 && (
+                <li
+                  style={{
+                    transform: `translateX(-20px)`,
+                  }}
+                  className="size-4 bg-foreground text-background text-xs items-center justify-center rounded-full "
+                >
+                  <span>+{Number(group?.members?.length) - 4}</span>
+                </li>
+              )}
+            </ul>
+          </div>
+          <CardDescription>
+            <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"}
+        >
+          <span>Add</span>
+          <Icons.addSquare className="size-8" />
+        </Link>
       </CardHeader>
     </Card>
   );