Detail Task Card

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import {
6  Card,
7  CardContent,
8  CardDescription,
9  CardFooter,
10  CardHeader,
11  CardTitle,
12} from "@/components/ui/card";
13import {
14  DropdownMenu,
15  DropdownMenuContent,
16  DropdownMenuItem,
17  DropdownMenuTrigger,
18} from "@/components/ui/dropdown-menu";
19import { Input } from "@/components/ui/input";
20import { Textarea } from "@/components/ui/textarea";
21import { AnimatePresence, motion } from "framer-motion";
22import {
23  Bold,
24  ChevronDown,
25  Italic,
26  List,
27  ListOrdered,
28  Plus,
29  RotateCcw,
30  Save,
31  Underline,
32  X,
33} from "lucide-react";
34import { useMemo, useState } from "react";
35 
36type Priority = "high" | "medium" | "low";
37 
38type TeamMember = {
39  id: string;
40  name: string;
41  role: string;
42  initials: string;
43  accent: string;
44};
45 
46const allMembers: TeamMember[] = [
47  {
48    id: "sophia",
49    name: "Sophia Williams",
50    role: "Product Designer",
51    initials: "SW",
52    accent: "ring-foreground text-foreground",
53  },
54  {
55    id: "liam",
56    name: "Liam Johnson",
57    role: "Design Manager",
58    initials: "LJ",
59    accent: "ring-foreground text-foreground",
60  },
61  {
62    id: "olivia",
63    name: "Olivia Smith",
64    role: "UX Researcher",
65    initials: "OS",
66    accent: "ring-foreground text-foreground",
67  },
68  {
69    id: "mia",
70    name: "Mia Chen",
71    role: "Product Owner",
72    initials: "MC",
73    accent: "ring-foreground text-foreground",
74  },
75  {
76    id: "ethan",
77    name: "Ethan Davis",
78    role: "UI Engineer",
79    initials: "ED",
80    accent: "ring-foreground text-foreground",
81  },
82];
83 
84const priorityMap: Record<
85  Priority,
86  { label: string; badge: string; dot: string; description: string }
87> = {
88  high: {
89    label: "High",
90    badge:
91      "border border-destructive/40 bg-destructive/20 text-destructive dark:text-red-400",
92    dot: "bg-destructive",
93    description: "Requires immediate focus and dedicated resources",
94  },
95  medium: {
96    label: "Medium",
97    badge:
98      "border border-amber-500/30 bg-amber-500/20 text-amber-600 dark:text-amber-400",
99    dot: "bg-amber-500",
100    description: "Important but not blocking other work",
101  },
102  low: {
103    label: "Low",
104    badge:
105      "border border-emerald-500/30 bg-emerald-500/20 text-emerald-600 dark:text-emerald-400",
106    dot: "bg-emerald-500",
107    description: "Nice-to-have improvements to schedule later",
108  },
109};
110 
111const defaultDescription =
112// … truncated