"use client";

import * as React from "react";

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

export interface CommentBoxProps {
  value?: string;
  defaultValue?: string;
  placeholder?: string;
  maxLength?: number;
  avatarUrl?: string;
  avatarFallback?: string;
  submitLabel?: string;
  onChange?: (value: string) => void;
  onSubmit?: (value: string) => void;
  className?: string;
}

export function CommentBox({
  value,
  defaultValue = "",
  placeholder = "Share your thoughts...",
  maxLength = 240,
  avatarUrl,
  avatarFallback,
  submitLabel = "Post comment",
  onChange,
  onSubmit,
  className,
}: CommentBoxProps) {
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const isControlled = value !== undefined;
  const inputValue = isControlled ? value : internalValue;

  const initials = avatarFallback?.slice(0, 2).toUpperCase() ?? "";
  const count = inputValue.length;
  const remaining = maxLength - count;
  const countTone = remaining <= 20 ? "text-primary" : "text-muted-foreground";

  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    const nextValue = event.target.value;
    if (!isControlled) {
      setInternalValue(nextValue);
    }
    onChange?.(nextValue);
  };

  const handleSubmit = () => {
    if (!inputValue.trim()) return;
    onSubmit?.(inputValue.trim());
    if (!isControlled) {
      setInternalValue("");
    }
  };

  return (
    <div className={cn("w-full rounded-xl 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="User avatar" className="h-full w-full object-cover" />
          ) : (
            <div className="flex h-full w-full items-center justify-center text-xs font-semibold text-foreground">
              {initials || "?"}
            </div>
          )}
        </div>
        <div className="flex-1 space-y-3">
          <textarea
            value={inputValue}
            onChange={handleChange}
            placeholder={placeholder}
            rows={3}
            maxLength={maxLength}
            className={cn(
              "w-full resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground",
              "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
          />
          <div className="flex flex-wrap items-center justify-between gap-3">
            <span className={cn("text-xs", countTone)}>
              {count}/{maxLength} characters
            </span>
            <button
              type="button"
              onClick={handleSubmit}
              disabled={!inputValue.trim()}
              className={cn(
                "inline-flex items-center justify-center rounded-lg border border-border bg-primary px-4 py-2 text-xs font-semibold",
                "text-primary-foreground transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                "disabled:cursor-not-allowed disabled:opacity-60"
              )}
            >
              {submitLabel}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
Comment Box

Dependencies

Files

Installation
