Task Card

1"use client";
2 
3import { Task } from "@/mock-data/tasks";
4import {
5  Calendar,
6  MessageSquare,
7  FileText,
8  Link,
9  CheckCircle,
10  InfoIcon,
11  Hexagon,
12  Stars,
13} from "lucide-react";
14import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
15import { Badge } from "@/components/ui/badge";
16import { cn } from "@/lib/utils";
17import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
18import "react-circular-progressbar/dist/styles.css";
19 
20interface TaskCardProps {
21  task: Task;
22}
23 
24export function TaskCard({ task }: TaskCardProps) {
25  const StatusIcon = task.status.icon;
26  const hasProgress = task.progress.total > 0;
27  const isCompleted =
28    task.progress.completed === task.progress.total && hasProgress;
29 
30  return (
31    <div className="bg-background shrink-0 rounded-lg overflow-hidden border border-border">
32      <div className="px-3 py-2.5">
33        <div className="flex items-center gap-2 mb-2">
34          <div className="size-5 mt-0.5 shrink-0 flex items-center justify-center bg-muted rounded-sm p-1">
35            <StatusIcon />
36          </div>
37          <h3 className="text-sm font-medium leading-tight flex-1">
38            {task.title}
39          </h3>
40          {task.priority === "urgent" && !isCompleted && (
41            <Stars className="size-4 shrink-0 text-pink-500" />
42          )}
43          {task.priority === "high" && !isCompleted && (
44            <InfoIcon className="size-4 shrink-0 text-red-500" />
45          )}
46          {task.priority === "medium" && !isCompleted && (
47            <Hexagon className="size-4 shrink-0 text-cyan-500" />
48          )}
49          {isCompleted && (
50            <CheckCircle className="size-4 shrink-0 text-green-500" />
51          )}
52        </div>
53 
54        <p className="text-xs text-muted-foreground mb-3 line-clamp-2">
55          {task.description}
56        </p>
57 
58        {task.labels.length > 0 && (
59          <div className="flex flex-wrap gap-1.5">
60            {task.labels.map((label) => (
61              <Badge
62                key={label.id}
63                variant="secondary"
64                className={cn(
65                  "text-[10px] px-1.5 py-0.5 font-medium",
66                  label.color
67                )}
68              >
69                {label.name}
70              </Badge>
71            ))}
72          </div>
73        )}
74      </div>
75 
76      <div className="px-3 py-2.5 border-t border-border border-dashed">
77        <div className="flex items-center justify-between flex-wrap gap-2">
78// … truncated