front/src/components/ArticleForm.jsx - main - TimurIsm/OpenEyes

front/src/components/ArticleForm.jsx
88 строк3 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import React from 'react';
import AlertMessage from './AlertMessage';
import { MAX_TITLE_LENGTH, MAX_DESCRIPTION_LENGTH } from '../hooks/useArticleForm';

const ArticleForm = ({
  formData,
  alertMessage,
  onInputChange,
  onKeyDown,
  showCharCount = true,
  onTextareaResize
}) => {
  return (
    <>
      <div>
        <label htmlFor="title" className="block mb-2 text-lg font-medium text-gray-900">
          Название статьи
          {showCharCount && (
            <span className="text-sm text-gray-500 ml-2">
              {formData.title.length}/{MAX_TITLE_LENGTH}
            </span>
          )}
        </label>
        <input
          id="title"
          type="text"
          className="bg-gray-50 border border-gray-300 text-gray-900 text-md rounded-lg focus:ring-blue-500 
          focus:border-blue-500 block w-full p-2.5"
          value={formData.title}
          onChange={(e) => onInputChange('title', e.target.value, MAX_TITLE_LENGTH)}
          onKeyDown={(e) => onKeyDown(e, 'title')}
          maxLength={MAX_TITLE_LENGTH}
          required
        />
      </div>

      <div>
        <label htmlFor="description" className="block mb-2 text-lg font-medium text-gray-900">
          Краткое описание
          {showCharCount && (
            <span className="text-sm text-gray-500 ml-2">
              {formData.description.length}/{MAX_DESCRIPTION_LENGTH}
            </span>
          )}
        </label>
        <textarea
          id="description"
          className="bg-gray-50 border border-gray-300 text-gray-900 text-md rounded-lg focus:ring-blue-500 
          focus:border-blue-500 block w-full p-2.5"
          value={formData.description}
          onChange={(e) => onInputChange('description', e.target.value, MAX_DESCRIPTION_LENGTH)}
          onKeyDown={(e) => onKeyDown(e, 'description')}
          maxLength={MAX_DESCRIPTION_LENGTH}
          required
        />
      </div>

      <div>
        <label htmlFor="content" className="block mb-2 text-lg font-medium text-gray-900">
          Содержание
          {showCharCount && (
            <span className="text-sm text-gray-500 ml-2">
              {formData.content.length} символов
            </span>
          )}
        </label>
        <textarea
          id="content"
          className="bg-gray-50 border border-gray-300 text-gray-900 text-md rounded-lg focus:ring-blue-500 
          focus:border-blue-500 block w-full h-64 p-2.5 resize-none overflow-y-auto"
          value={formData.content}
          onChange={(e) => onInputChange('content', e.target.value, Infinity)}
          onKeyDown={(e) => onKeyDown(e, 'content')}
          onInput={onTextareaResize}
          required
        />
      </div>

      {alertMessage && (
        <div className="mb-4">
          <AlertMessage type={alertMessage.type} message={alertMessage.message} />
        </div>
      )}
    </>
  );
};

export default ArticleForm;