src/components/CreateDraftForm.tsx - master - dayekb/vibecoding_perplexity_idea3

src/components/CreateDraftForm.tsx
100 строк3 KB
Your Name
feat: Полная реализация коллаборативного генератора контента с AI и Git интеграцией
20 авг 2025, 22:44
20 авг 2025, 22:448b74219
'use client';

import { useState } from 'react';
import { Draft } from '@/types';

interface CreateDraftFormProps {
  onDraftCreated: (draft: Draft) => void;
}

export default function CreateDraftForm({ onDraftCreated }: CreateDraftFormProps) {
  const [topic, setTopic] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!topic.trim()) {
      setError('Введите тему статьи');
      return;
    }

    setIsLoading(true);
    setError('');

    try {
      const response = await fetch('/api/drafts', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ topic: topic.trim() }),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || 'Не удалось создать черновик');
      }

      const draft = await response.json();
      onDraftCreated(draft);
      setTopic('');
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Произошла ошибка');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-md p-6 mb-6">
      <h2 className="text-2xl font-bold text-gray-800 mb-4">
        Создать новый черновик
      </h2>
      
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="topic" className="block text-sm font-medium text-gray-700 mb-2">
            Тема статьи
          </label>
          <input
            type="text"
            id="topic"
            value={topic}
            onChange={(e) => setTopic(e.target.value)}
            placeholder="Например: Искусственный интеллект в современном мире"
            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            disabled={isLoading}
          />
        </div>

        {error && (
          <div className="text-red-600 text-sm bg-red-50 p-3 rounded-md">
            {error}
          </div>
        )}

        <button
          type="submit"
          disabled={isLoading || !topic.trim()}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
        >
          {isLoading ? (
            <div className="flex items-center justify-center">
              <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
              Генерирую черновик...
            </div>
          ) : (
            'Создать черновик с AI'
          )}
        </button>
      </form>

      <div className="mt-4 text-sm text-gray-600">
        <p>✨ AI автоматически создаст заголовок и первый абзац статьи</p>
        <p>📝 Каждый черновик сохраняется в Git с соответствующим коммитом</p>
      </div>
    </div>
  );
}