Programlama için yapay zeka önerisi

import React, { useState, useRef, useEffect } from 'react';
import {
  Bold,
  Italic,
  Underline,
  Strikethrough,
  List,
  ListOrdered,
  Quote,
  Link,
  Code,
  Type,
  Heading1,
  Heading2,
  Heading3,
  Save,
  Copy,
  FileText,
  Check,
  Palette
} from 'lucide-react';

export default function App() {
  const [content, setContent] = useState('');
  const [isSaved, setIsSaved] = useState(false);
  const [copied, setCopied] = useState(false);
  const [theme, setTheme] = useState('light');
  const textareaRef = useRef(null);

  const toggleBold = () => {
    document.execCommand('bold', false, null);
    setIsSaved(false);
  };

  const toggleItalic = () => {
    document.execCommand('italic', false, null);
    setIsSaved(false);
  };

  const toggleUnderline = () => {
    document.execCommand('underline', false, null);
    setIsSaved(false);
  };

  const toggleStrikethrough = () => {
    document.execCommand('strikethrough', false, null);
    setIsSaved(false);
  };

  const toggleBulletList = () => {
    document.execCommand('insertUnorderedList', false, null);
    setIsSaved(false);
  };

  const toggleNumberedList = () => {
    document.execCommand('insertOrderedList', false, null);
    setIsSaved(false);
  };

  const toggleBlockquote = () => {
    document.execCommand('formatBlock', false, 'blockquote');
    setIsSaved(false);
  };

  const toggleCode = () => {
    document.execCommand('formatBlock', false, 'pre');
    setIsSaved(false);
  };

  const addLink = () => {
    const url = prompt('URL girin:');
    if (url) {
      document.execCommand('createLink', false, url);
      setIsSaved(false);
    }
  };

  const formatHeading = (level) => {
    document.execCommand('formatBlock', false, `h${level}`);
    setIsSaved(false);
  };

  const handleContentChange = () => {
    const newContent = textareaRef.current.innerHTML;
    setContent(newContent);
    setIsSaved(false);
  };

  const saveContent = () => {
    setIsSaved(true);
    setTimeout(() => setIsSaved(false), 2000);
  };

  const copyContent = () => {
    navigator.clipboard.writeText(content);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  const toolbarButtons = [
    { icon: Bold, label: 'Kalın', action: toggleBold, shortcut: 'Ctrl+B' },
    { icon: Italic, label: 'İtalik', action: toggleItalic, shortcut: 'Ctrl+I' },
    { icon: Underline, label: 'Altı Çizili', action: toggleUnderline, shortcut: 'Ctrl+U' },
    { icon: Strikethrough, label: 'Üstü Çizili', action: toggleStrikethrough },
    { icon: List, label: 'Madde İşareti', action: toggleBulletList },
    { icon: ListOrdered, label: 'Numaralı Liste', action: toggleNumberedList },
    { icon: Quote, label: 'Alıntı', action: toggleBlockquote },
    { icon: Code, label: 'Kod Bloğu', action: toggleCode },
    { icon: Link, label: 'Link', action: addLink, shortcut: 'Ctrl+K' },
    { icon: Heading1, label: 'Başlık 1', action: () => formatHeading(1) },
    { icon: Heading2, label: 'Başlık 2', action: () => formatHeading(2) },
    { icon: Heading3, label: 'Başlık 3', action: () => formatHeading(3) },
  ];

  return (
    <div className={`min-h-screen transition-colors duration-300 ${theme === 'light' ? 'bg-gray-50 text-gray-900' : 'bg-gray-900 text-gray-100'}`}>
      <div className="container mx-auto px-4 py-8 max-w-6xl">
        {/* Başlık */}
        <div className="flex items-center justify-between mb-8">
          <div className="flex items-center space-x-3">
            <FileText className="w-8 h-8 text-blue-600" />
            <h1 className="text-3xl font-bold">Metin Editörü</h1>
          </div>
          <div className="flex items-center space-x-4">
            <button
              onClick={toggleTheme}
              className={`p-2 rounded-lg transition-colors ${
                theme === 'light'
                  ? 'bg-gray-200 hover:bg-gray-300 text-gray-700'
                  : 'bg-gray-700 hover:bg-gray-600 text-gray-300'
              }`}
              title="Temayı Değiştir"
            >
              <Palette className="w-5 h-5" />
            </button>
            <button
              onClick={copyContent}
              className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
                copied
                  ? 'bg-green-500 text-white'
                  : theme === 'light'
                    ? 'bg-gray-200 hover:bg-gray-300 text-gray-700'
                    : 'bg-gray-700 hover:bg-gray-600 text-gray-300'
              }`}
            >
              {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
              <span>{copied ? 'Kopyalandı!' : 'Kopyala'}</span>
            </button>
            <button
              onClick={saveContent}
              className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
                isSaved
                  ? 'bg-green-500 text-white'
                  : theme === 'light'
                    ? 'bg-blue-600 hover:bg-blue-700 text-white'
                    : 'bg-blue-500 hover:bg-blue-600 text-white'
              }`}
            >
              {isSaved ? <Check className="w-4 h-4" /> : <Save className="w-4 h-4" />}
              <span>{isSaved ? 'Kaydedildi!' : 'Kaydet'}</span>
            </button>
          </div>
        </div>

        {/* Araç Çubuğu */}
        <div className={`flex flex-wrap items-center gap-2 p-4 rounded-lg mb-4 ${
          theme === 'light' ? 'bg-white shadow-sm' : 'bg-gray-800'
        }`}>
          {toolbarButtons.map(({ icon: Icon, label, action, shortcut }, index) => (
            <button
              key={index}
              onClick={action}
              className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-opacity-20 ${
                theme === 'light'
                  ? 'hover:bg-gray-200 text-gray-700'
                  : 'hover:bg-gray-600 text-gray-300'
              }`}
              title={`${label} ${shortcut ? `(${shortcut})` : ''}`}
            >
              <Icon className="w-4 h-4" />
              <span className="hidden sm:inline">{label}</span>
            </button>
          ))}
        </div>

        {/* Editör */}
        <div className="relative">
          <div
            ref={textareaRef}
            contentEditable
            onInput={handleContentChange}
            className={`w-full min-h-96 p-6 rounded-lg border-2 focus:border-blue-500 focus:outline-none transition-colors resize-none ${
              theme === 'light'
                ? 'bg-white border-gray-200 shadow-sm'
                : 'bg-gray-800 border-gray-700 text-gray-100'
            }`}
            placeholder="İçeriğinizi buraya yazmaya başlayın..."
          />
         
          {/* Karakter Sayacı */}
          <div className={`absolute bottom-2 right-2 text-xs ${
            theme === 'light' ? 'text-gray-500' : 'text-gray-400'
          }`}>
            {content.length} karakter
          </div>
        </div>

        {/* Önizleme Bölümü */}
        <div className="mt-8">
          <h2 className="text-xl font-semibold mb-4 flex items-center">
            <Type className="w-5 h-5 mr-2" />
            Önizleme
          </h2>
          <div className={`p-6 rounded-lg border-2 ${
            theme === 'light'
              ? 'bg-white border-gray-200 shadow-sm'
              : 'bg-gray-800 border-gray-700'
          }`}>
            {content ? (
              <div
                dangerouslySetInnerHTML={{ __html: content }}
                className="prose prose-lg max-w-none"
              />
            ) : (
              <p className={theme === 'light' ? 'text-gray-400' : 'text-gray-500'}>
                Biçimlendirilmiş içeriğiniz burada görünecek...
              </p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}