src/components/CommentForm.tsx - master - aaronair/Test_task_rt_solution

src/components/CommentForm.tsx
90 строк3 KB
Ilikedrinkpivo
first_commit
28 май 2026, 14:51
28 май 2026, 14:51b4498fc
import { useState } from "react";

interface Props {
  onSubmit: (text: string, authorName: string) => void;
}

/** Скрыто до появления ролевой модели; форма и API остаются в коде. */
export const COMMENTS_ENABLED = false;

export function CommentForm({ onSubmit }: Props) {
  const [authorName, setAuthorName] = useState("");
  const [text, setText] = useState("");
  const [showTip, setShowTip] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!COMMENTS_ENABLED) return;
    const trimmed = text.trim();
    const name = authorName.trim() || "Гость";
    if (!trimmed) return;
    onSubmit(trimmed, name);
    setText("");
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-2">
      <label
        htmlFor="comment-author"
        className="block text-sm font-medium text-ink-700"
      >
        Ваше имя
      </label>
      <input
        id="comment-author"
        type="text"
        value={authorName}
        onChange={(e) => setAuthorName(e.target.value)}
        placeholder="Иван Петров"
        className="w-full rounded-lg border border-ink-300/60 bg-surface-card px-3 py-2 text-sm"
      />
      <label
        htmlFor="comment-text"
        className="block text-sm font-medium text-ink-700"
      >
        Добавить комментарий
      </label>
      <textarea
        id="comment-text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows={3}
        placeholder="Поделитесь мнением или предложите идею..."
        className="w-full rounded-lg border border-ink-300/60 bg-surface-card px-3 py-2 text-sm
                   placeholder:text-ink-500 focus:border-primary-500 outline-none resize-y"
      />
      <div className="flex justify-end">
        {COMMENTS_ENABLED ? (
          <button
            type="submit"
            className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
            disabled={text.trim().length === 0}
          >
            Отправить
          </button>
        ) : (
          <span
            className="relative inline-flex cursor-pointer"
            onMouseEnter={() => setShowTip(true)}
            onMouseLeave={() => setShowTip(false)}
          >
            <span
              aria-disabled="true"
              className="inline-flex items-center justify-center gap-2 rounded-lg border border-ink-300/70 bg-surface-muted px-4 py-2 text-sm font-medium text-ink-500 select-none"
            >
              Отправить
            </span>
            {showTip && (
              <span
                role="tooltip"
                className="absolute top-full right-0 z-50 mt-2 w-max max-w-xs rounded-md bg-ink-900 px-2.5 py-1.5 text-xs font-normal text-white shadow-md"
              >
                Функция в разработке
              </span>
            )}
          </span>
        )}
      </div>
    </form>
  );
}