Claude Sonnet 4

import React, { useState, useEffect } from 'react'; import { PlusIcon, TrashIcon, CheckIcon, PencilIcon, XMarkIcon } from '@heroicons/react/24/outline'; const TodoApp = () => { const [todos, setTodos] = useState([]); const [inputValue, setInputValue] = useState(''); const [filter, setFilter] = useState('all'); const [editingId, setEditingId] = useState(null); const [editValue, setEditValue] = useState(''); // LocalStorage'dan todoları yükle useEffect(() => { const savedTodos = localStorage.getItem('todos'); if (savedTodos) { setTodos(JSON.parse(savedTodos)); } }, []); // Todoları localStorage'a kaydet useEffect(() => { localStorage.setItem('todos', JSON.stringify(todos)); }, [todos]); // Yeni todo ekle const addTodo = () => { if (inputValue.trim() !== '') { const newTodo = { id: Date.now(), text: inputValue.trim(), completed: false, createdAt: new Date().toISOString() }; setTodos([newTodo, ...todos]); setInputValue(''); } }; // Todo'yu sil const deleteTodo = (id) => { setTodos(todos.filter(todo => todo.id !== id)); }; // Todo durumunu değiştir const toggleTodo = (id) => { setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo )); }; // Todo düzenlemeye başla const startEdit = (id, text) => { setEditingId(id); setEditValue(text); }; // Todo düzenlemeyi kaydet const saveEdit = () => { if (editValue.trim() !== '') { setTodos(todos.map(todo => todo.id === editingId ? { ...todo, text: editValue.trim() } : todo )); } setEditingId(null); setEditValue(''); }; // Düzenlemeyi iptal et const cancelEdit = () => { setEditingId(null); setEditValue(''); }; // Tamamlanan todoları temizle const clearCompleted = () => { setTodos(todos.filter(todo => !todo.completed)); }; // Filtrelenmiş todoları getir const filteredTodos = todos.filter(todo => { if (filter === 'active') return !todo.completed; if (filter === 'completed') return todo.completed; return true; }); // Enter tuşu ile işlem yap const handleKeyPress = (e, action) => { if (e.key === 'Enter') { action(); } }; const completedCount = todos.filter(todo => todo.completed).length; const activeCount = todos.length - completedCount; return ( <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 py-8 px-4"> <div className="max-w-2xl mx-auto"> {/* Header */} <div className="text-center mb-8"> <h1 className="text-4xl font-bold text-gray-800 mb-2">Todo App</h1> <p className="text-gray-600">Görevlerinizi organize edin ve takip edin</p> </div> {/* Todo Input */} <div className="bg-white rounded-2xl shadow-lg p-6 mb-6"> <div className="flex gap-3"> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} onKeyPress={(e) => handleKeyPress(e, addTodo)} placeholder="Yeni bir görev ekleyin..." className="flex-1 px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" /> <button onClick={addTodo} className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-xl transition-colors duration-200 flex items-center gap-2 font-medium" > <PlusIcon className="w-5 h-5" /> Ekle </button> </div> </div> {/* Filter Buttons */} {todos.length > 0 && ( <div className="bg-white rounded-2xl shadow-lg p-4 mb-6"> <div className="flex flex-wrap gap-2 justify-center"> {[ { key: 'all', label: 'Tümü', count: todos.length }, { key: 'active', label: 'Aktif', count: activeCount }, { key: 'completed', label: 'Tamamlanan', count: completedCount } ].map(({ key, label, count }) => ( <button key={key} onClick={() => setFilter(key)} className={'px-4 py-2 rounded-lg font-medium transition-all duration-200 { filter === key ? 'bg-blue-500 text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }'} > {label} ({count}) </button> ))} </div> </div> )} {/* Todo List */} <div className="bg-white rounded-2xl shadow-lg overflow-hidden"> {filteredTodos.length === 0 ? ( <div className="p-12 text-center"> <div className="text-gray-400 mb-4"> <CheckIcon className="w-16 h-16 mx-auto" /> </div> <p className="text-gray-500 text-lg"> {todos.length === 0 ? 'Henüz görev eklenmemiş' : filter === 'active' ? 'Aktif görev bulunmuyor' : 'Tamamlanan görev bulunmuyor' } </p> </div> ) : ( <div className="divide-y divide-gray-100"> {filteredTodos.map((todo, index) => ( <div key={todo.id} className={'p-4 transition-all duration-200 hover:bg-gray-50 { todo.completed ? 'bg-gray-50' : '' }'} > <div className="flex items-center gap-4"> {/* Checkbox */} <button onClick={() => toggleTodo(todo.id)} className={'w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 { todo.completed ? 'bg-green-500 border-green-500 text-white' : 'border-gray-300 hover:border-green-400' }'} > {todo.completed && <CheckIcon className="w-4 h-4" />} </button> {/* Todo Content */} <div className="flex-1 min-w-0"> {editingId === todo.id ? ( <input type="text" value={editValue} onChange={(e) => setEditValue(e.target.value)} onKeyPress={(e) => handleKeyPress(e, saveEdit)} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" autoFocus /> ) : ( <div> <p className={'text-lg { todo.completed ? 'line-through text-gray-500' : 'text-gray-800' }'}> {todo.text} </p> <p className="text-sm text-gray-400 mt-1"> {new Date(todo.createdAt).toLocaleDateString('tr-TR', { day: 'numeric', month: 'long', hour: '2-digit', minute: '2-digit' })} </p> </div> )} </div> {/* Action Buttons */} <div className="flex gap-2"> {editingId === todo.id ? ( <> <button onClick={saveEdit} className="p-2 text-green-600 hover:bg-green-100 rounded-lg transition-colors duration-200" > <CheckIcon className="w-5 h-5" /> </button> <button onClick={cancelEdit} className="p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors duration-200" > <XMarkIcon className="w-5 h-5" /> </button> </> ) : ( <> <button onClick={() => startEdit(todo.id, todo.text)} className="p-2 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors duration-200" > <PencilIcon className="w-5 h-5" /> </button> <button onClick={() => deleteTodo(todo.id)} className="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors duration-200" > <TrashIcon className="w-5 h-5" /> </button> </> )} </div> </div> </div> ))} </div> )} </div> {/* Footer Actions */} {todos.length > 0 && ( <div className="mt-6 flex flex-wrap gap-4 justify-center"> <div className="bg-white rounded-xl shadow-lg px-6 py-3"> <span className="text-gray-600"> Toplam: <span className="font-semibold text-blue-600">{todos.length}</span> görev </span> </div> {completedCount > 0 && ( <button onClick={clearCompleted} className="bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-xl transition-colors duration-200 font-medium" > Tamamlananları Temizle ({completedCount}) </button> )} </div> )} </div> </div> ); }; export default TodoApp;