import * as React from "react";

import { cn } from "@/lib/utils";

interface CommentCardProps {
  name: string;
  timestamp: string;
  comment: string;
  avatarUrl?: string;
  className?: string;
  onReply?: () => void;
}

const ReplyIcon = ({ className }: { className?: string }) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={1.6}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    aria-hidden
  >
    <path d="M20 12a8 8 0 0 1-8 8" />
    <path d="M4 12a8 8 0 0 1 8-8" />
    <path d="M12 4v4" />
  </svg>
);

const getInitials = (name: string) => {
  const parts = name.split(" ").filter(Boolean);
  const first = parts[0]?.[0] ?? "";
  const second = parts[1]?.[0] ?? "";
  return `${first}${second}`.toUpperCase();
};

export function CommentCard({
  name,
  timestamp,
  comment,
  avatarUrl,
  className,
  onReply,
}: CommentCardProps) {
  return (
    <div
      className={cn(
        "w-full max-w-md rounded-lg border border-border bg-card p-4",
        className
      )}
    >
      <div className="flex gap-3">
        <div className="h-10 w-10 overflow-hidden rounded-full border border-border bg-muted">
          {avatarUrl ? (
            <img
              src={avatarUrl}
              alt={name}
              className="h-full w-full object-cover"
            />
          ) : (
            <div className="flex h-full w-full items-center justify-center text-xs font-semibold text-foreground">
              {getInitials(name)}
            </div>
          )}
        </div>
        <div className="flex-1 space-y-2">
          <div className="flex flex-wrap items-center gap-2">
            <p className="text-sm font-semibold text-foreground">{name}</p>
            <span className="text-xs text-muted-foreground">{timestamp}</span>
          </div>
          <p className="text-sm text-foreground">{comment}</p>
          <button
            type="button"
            onClick={onReply}
            className={cn(
              "inline-flex items-center gap-2 rounded-md border border-border bg-background px-3 py-1.5",
              "text-xs font-semibold text-foreground transition",
              "hover:bg-muted focus-visible:outline-none focus-visible:bg-muted"
            )}
          >
            <ReplyIcon className="h-3.5 w-3.5" />
            Reply
          </button>
        </div>
      </div>
    </div>
  );
}
Comment Card

Dependencies

Files

Installation
