69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
"use client";
|
|
import Avatar from "@/components/avatar";
|
|
import { Icons } from "@/components/icons";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import type { Group } from "@/server/db/schema";
|
|
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">
|
|
<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>
|
|
</div>
|
|
<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>
|
|
<CardDescription>
|
|
<p>{group.description}</p>
|
|
</CardDescription>
|
|
</div>
|
|
<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" />
|
|
</Button>
|
|
</CardHeader>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default GroupCard;
|