Nested Comments

import { NestedComments } from "@/components/ui/nested-comments";
import type { Comment } from "@/components/ui/nested-comments";

const comments: Comment[] = [
  {
    id: "1",
    author: "Alex Kim",
    content: "This component is incredible! The animations feel so natural.",
    timestamp: "2 hours ago",
    likes: 14,
    replies: [
      {
        id: "1-1",
        author: "Sarah Chen",
        content: "Agreed! The collapse animation is especially smooth.",
        timestamp: "1 hour ago",
        likes: 6,
        replies: [
          {
            id: "1-1-1",
            author: "Alex Kim",
            content: "Thanks! Motion.dev's layout animations make it effortless.",
            timestamp: "45 min ago",
            likes: 3,
          },
        ],
      },
    ],
  },
  {
    id: "2",
    author: "Jordan Lee",
    content: "Love the inline reply box with keyboard shortcuts. Very intuitive UX.",
    timestamp: "3 hours ago",
    likes: 9,
  },
];

export default function Example() {
  return (
    <div className="p-6 bg-neutral-950 rounded-xl min-h-[400px]">
      <NestedComments
        comments={comments}
        maxDepth={4}
        accentColor="#8b5cf6"
        onReply={(id, content) => console.log("Reply to", id, ":", content)}
        onLike={(id) => console.log("Liked", id)}
      />
    </div>
  );
}