CommentThread

1"use client";
2
3import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
4import { Button } from "@/components/ui/button";
5import { Heart, MessageCircle } from "lucide-react";
6
7interface CommentProps {
8  name: string;
9  avatarSrc?: string;
10  time: string;
11  content: string;
12  likes: number;
13  isNested?: boolean;
14}
15
16function Comment({ name, avatarSrc, time, content, likes, isNested }: CommentProps) {
17  return (
18    <div className={`${isNested ? "pl-8 border-l-2 border-muted ml-4" : ""} mb-4`}>
19      <div className="flex gap-3">
20        <Avatar className="w-8 h-8">
21          <AvatarImage src={avatarSrc} />
22          <AvatarFallback>{name[0]}</AvatarFallback>
23        </Avatar>
24        <div className="flex-1">
25          <div className="flex items-center gap-2">
26            <span className="font-semibold text-sm">{name}</span>
27            <span className="text-xs text-muted-foreground">{time}</span>
28          </div>
29          <p className="text-sm mt-1">{content}</p>
30          <div className="flex items-center gap-4 mt-2">
31            <Button variant="ghost" size="sm" className="h-7 px-2 gap-1">
32              <Heart className="w-3 h-3" />
33              <span className="text-xs">{likes}</span>
34            </Button>
35            <Button variant="ghost" size="sm" className="h-7 px-2 gap-1">
36              <MessageCircle className="w-3 h-3" />
37              <span className="text-xs">Reply</span>
38            </Button>
39          </div>
40        </div>
41      </div>
42    </div>
43  );
44}
45
46export default function CommentThread() {
47  return (
48    <div className="p-4 max-w-2xl">
49      <h3 className="font-semibold mb-4">Comments (4)</h3>
50      <Comment
51        name="Sarah Johnson"
52        avatarSrc="https://i.pravatar.cc/150?img=5"
53        time="2 hours ago"
54        content="This is an amazing post! Really helped me understand the concept better."
55        likes={24}
56      />
57      <Comment
58        name="Mike Chen"
59        avatarSrc="https://i.pravatar.cc/150?img=3"
60        time="1 hour ago"
61        content="Great explanation! Would love to see more content like this."
62        likes={12}
63      />
64      <div className="mt-4">
65        <Comment
66          name="Emily Davis"
67          avatarSrc="https://i.pravatar.cc/150?img=9"
68          time="45 minutes ago"
69          content="Thanks for sharing! Quick question - does this work with TypeScript?"
70          likes={8}
71        />
72        <Comment
73          name="Sarah Johnson"
74          avatarSrc="https://i.pravatar.cc/150?img=5"
75          time="30 minutes ago"
76          content="Yes! It works perfectly with TypeScript. Just make sure to install the types."
77          likes={5}
78          isNested={true}
79        />
80        <Comment
81          name="Emily Davis"
82          avatarSrc="https://i.pravatar.cc/150?img=9"
83          time="25 minutes ago"
84          content="Perfect, thanks for the quick response!"
85          likes={2}
86          isNested={true}
87        />
88      </div>
89    </div>
90  );
91}