Detail Task Card

1"use client";
2 
3import { NativeButton } from "../../native/baseui/native-button-baseui";
4import { AnimatePresence, motion } from "framer-motion";
5import {
6  Bold,
7  ChevronDown,
8  Italic,
9  List,
10  ListOrdered,
11  Plus,
12  RotateCcw,
13  Save,
14  Underline,
15  X,
16} from "lucide-react";
17import { useEffect, useMemo, useRef, useState } from "react";
18 
19type Priority = "high" | "medium" | "low";
20 
21type TeamMember = {
22  id: string;
23  name: string;
24  role: string;
25  initials: string;
26  accent: string;
27};
28 
29const allMembers: TeamMember[] = [
30  {
31    id: "sophia",
32    name: "Sophia Williams",
33    role: "Product Designer",
34    initials: "SW",
35    accent: "ring-foreground text-foreground",
36  },
37  {
38    id: "liam",
39    name: "Liam Johnson",
40    role: "Design Manager",
41    initials: "LJ",
42    accent: "ring-foreground text-foreground",
43  },
44  {
45    id: "olivia",
46    name: "Olivia Smith",
47    role: "UX Researcher",
48    initials: "OS",
49    accent: "ring-foreground text-foreground",
50  },
51  {
52    id: "mia",
53    name: "Mia Chen",
54    role: "Product Owner",
55    initials: "MC",
56    accent: "ring-foreground text-foreground",
57  },
58  {
59    id: "ethan",
60    name: "Ethan Davis",
61    role: "UI Engineer",
62    initials: "ED",
63    accent: "ring-foreground text-foreground",
64  },
65];
66 
67const priorityMap: Record<
68  Priority,
69  { label: string; badge: string; dot: string; description: string }
70> = {
71  high: {
72    label: "High",
73    badge:
74      "border border-destructive/40 bg-destructive/20 text-destructive dark:text-red-400",
75    dot: "bg-destructive",
76    description: "Requires immediate focus and dedicated resources",
77  },
78  medium: {
79    label: "Medium",
80    badge:
81      "border border-amber-500/30 bg-amber-500/20 text-amber-600 dark:text-amber-400",
82    dot: "bg-amber-500",
83    description: "Important but not blocking other work",
84  },
85  low: {
86    label: "Low",
87    badge:
88      "border border-emerald-500/30 bg-emerald-500/20 text-emerald-600 dark:text-emerald-400",
89    dot: "bg-emerald-500",
90    description: "Nice-to-have improvements to schedule later",
91  },
92};
93 
94const defaultDescription =
95  "The goal is to update the current design system with the latest components and styles. This includes reviewing existing elements, identifying areas for improvement, and implementing changes to ensure consistency and usability across all platforms.";
96const maxDescriptionLength = 200;
97 
98export function DetailTaskBaseUI() {
99  const [title, setTitle] = useState("Edit Design System");
100// … truncated