Comment Thread

import CommentThread, {
  type ThreadComment,
} from "@/components/ui/comment-thread";
import { useState } from "react";

const currentUser = { id: "u-1", name: "Alex Rivera" };
const people = [
  currentUser,
  { id: "u-2", name: "Priya Shah" },
  { id: "u-3", name: "Marco Dias" },
];

const initialComments: ThreadComment[] = [
  {
    id: "c-1",
    author: { id: "u-2", name: "Priya Shah" },
    body: "Can we tighten up the spacing between the hero title and the subhead? Feels a bit loose on mobile.",
    createdAt: "2h",
    reactions: [{ emoji: "👍", users: ["u-1", "u-3"] }],
    replies: [
      {
        id: "c-2",
        author: { id: "u-1", name: "Alex Rivera" },
        body: "@Priya Shah good catch, I'll drop the gap to 12px and ship a fix.",
        createdAt: "1h",
      },
    ],
  },
  {
    id: "c-3",
    author: { id: "u-3", name: "Marco Dias" },
    body: "Loving the new empty state illustration, nice work team.",
    createdAt: "45m",
    reactions: [{ emoji: "🎉", users: ["u-2"] }],
  },
];

export default function CommentThreadDemo() {
  const [comments, setComments] = useState<ThreadComment[]>(initialComments);
  const [resolved, setResolved] = useState(false);

  return (
    <div className="w-full max-w-xl p-6">
      <CommentThread
        title="Hero section feedback"
        currentUser={currentUser}
        people={people}
        comments={comments}
        onCommentsChange={setComments}
        resolved={resolved}
        onResolvedChange={setResolved}
      />
    </div>
  );
}