Card Task

1import { Calendar, ListTodo, MessageCircleMore, MoreHorizontal, Trash, UserPlus, Users } from "lucide-react";
2import { Avatar, AvatarFallback, AvatarImage } from "@/registry/brook/ui/avatar/avatar";
3import { Badge } from "@/registry/brook/ui/badge/badge";
4import { Button } from "@/registry/brook/ui/button/button";
5import {
6  Card,
7  CardAction,
8  CardContent,
9  CardDescription,
10  CardFooter,
11  CardHeader,
12  CardTitle,
13} from "@/registry/brook/ui/card/card";
14import {
15  DropdownMenu,
16  DropdownMenuItem,
17  DropdownMenuPopup,
18  DropdownMenuPortal,
19  DropdownMenuPositioner,
20  DropdownMenuSeparator,
21  DropdownMenuTrigger,
22} from "@/registry/brook/ui/dropdown-menu/dropdown-menu";
23import {
24  Tooltip,
25  TooltipArrow,
26  TooltipPopup,
27  TooltipPortal,
28  TooltipPositioner,
29  TooltipProvider,
30  TooltipTrigger,
31} from "@/registry/brook/ui/tooltip/tooltip";
32import styles from "./card-task.module.css";
33 
34export type User = {
35  value: string;
36  label: string;
37  email: string;
38  avatar: string;
39};
40 
41type TaskCardProps = {
42  title: string;
43  description: string;
44  tags: Array<{
45    label: string;
46    variant?: "default" | "destructive";
47  }>;
48  collaborators: User[];
49  stats: {
50    comments: number;
51    subtasks: string;
52  };
53  dueDate: {
54    label: string;
55    variant?: "default" | "warning";
56  };
57  onAddCollaborator?: () => void;
58  onDeleteTask?: () => void;
59};
60 
61function AvatarGroup({ users, maxDisplay = 3 }: { users: User[]; maxDisplay?: number }) {
62  const displayUsers = users.slice(0, maxDisplay);
63  const remainingCount = users.length - maxDisplay;
64 
65  return (
66    <TooltipProvider>
67      <div style={{ display: "flex", alignItems: "center" }}>
68        {displayUsers.map((user, index) => (
69          <Tooltip key={user.value}>
70            <TooltipTrigger
71              render={
72                <div style={{ marginLeft: index > 0 ? "-6px" : "0" }}>
73                  <Avatar
74                    style={{
75                      width: "24px",
76                      height: "24px",
77                      border: "2px solid var(--card)",
78                    }}
79                  >
80                    <AvatarImage alt={`profile image for ${user.label}`} src={user.avatar} />
81                    <AvatarFallback>
82                      {user.label
83                        ?.split(" ")
84                        .map((n: string) => n[0])
85                        .join("") || "??"}
86                    </AvatarFallback>
87                  </Avatar>
88                </div>
89              }
90// … truncated