Comment Thread

1"use client";
2 
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Button } from "@/components/ui/button";
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuItem,
9  DropdownMenuTrigger,
10} from "@/components/ui/dropdown-menu";
11import { Textarea } from "@/components/ui/textarea";
12import { cn } from "@/lib/utils";
13import { AnimatePresence, motion } from "framer-motion";
14import {
15  CornerDownRight,
16  Heart,
17  Image as ImageIcon,
18  MessageCircle,
19  MoreHorizontal,
20  Paperclip,
21  Send,
22  Share2,
23  Smile,
24} from "lucide-react";
25import { useEffect, useRef, useState } from "react";
26 
27// ============================================================================
28// TYPES
29// ============================================================================
30 
31interface User {
32  name: string;
33  avatar: string;
34  role?: string;
35}
36 
37interface Comment {
38  id: string;
39  user: User;
40  content: string;
41  timestamp: string;
42  likes: number;
43  replies?: Comment[];
44  isLiked?: boolean;
45}
46 
47// ============================================================================
48// DUMMY DATA
49// ============================================================================
50 
51const INITIAL_COMMENTS: Comment[] = [
52  {
53    id: "1",
54    user: {
55      name: "Alex Morgan",
56      avatar: "https://i.pravatar.cc/150?u=alex",
57      role: "Product Designer",
58    },
59    content:
60      "The new glassmorphism trend is really interesting. I love how it adds depth without cluttering the interface. Has anyone tried implementing this with pure CSS vs using backdrop-filter?",
61    timestamp: "2h ago",
62    likes: 24,
63    isLiked: true,
64    replies: [
65      {
66        id: "1-1",
67        user: {
68          name: "Sarah Chen",
69          avatar: "https://i.pravatar.cc/150?u=sarah",
70          role: "Frontend Dev",
71        },
72        content:
73          "I've been using backdrop-filter extensively. It's much more performant now across modern browsers. The only catch is Firefox sometimes needs a fallback.",
74        timestamp: "1h ago",
75        likes: 12,
76        isLiked: false,
77        replies: [],
78      },
79      {
80        id: "1-2",
81        user: {
82          name: "Mike Ross",
83          avatar: "https://i.pravatar.cc/150?u=mike",
84        },
85        content:
86          "Agreed! It gives such a premium feel. I usually pair it with subtle noise textures to avoid banding.",
87        timestamp: "45m ago",
88        likes: 8,
89        isLiked: false,
90        replies: [],
91      },
92    ],
93  },
94// … truncated