Card Task (Tailwind)

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