Untitled

import React, { useState } from 'react';
import { Pencil, Trash2, Plus, X } from 'lucide-react';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
      <div className="bg-white p-6 rounded-lg relative w-full max-w-md">
        <button onClick={onClose} className="absolute top-2 right-2">
          <X className="h-6 w-6" />
        </button>
        {children}
      </div>
    </div>
  );
};

const NotesApp = () => {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({ title: '', content: '' });
  const [editingNote, setEditingNote] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const addNote = () => {
    if (newNote.title.trim() !== '' || newNote.content.trim() !== '') {
      setNotes([...notes, { id: Date.now(), ...newNote }]);
      setNewNote({ title: '', content: '' });
    }
  };

  const deleteNote = (id) => {
    setNotes(notes.filter(note => note.id !== id));
  };

  const openEditModal = (note) => {
    setEditingNote(note);
    setIsModalOpen(true);
  };

  const saveEdit = () => {
    setNotes(notes.map(note => 
      note.id === editingNote.id ? editingNote : note
    ));
    setIsModalOpen(false);
  };

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">My Notes</h1>
      <div className="mb-4">
        <input
          type="text"
          value={newNote.title}
          onChange={(e) => setNewNote({...newNote, title: e.target.value})}
          placeholder="Note Title"
          className="w-full p-2 border rounded mb-2"
        />
        <textarea
          value={newNote.content}
          onChange={(e) => setNewNote({...newNote, content: e.target.value})}
          placeholder="Note Content"
          className="w-full p-2 border rounded h-24 mb-2"
        />
        <button onClick={addNote} className="bg-blue-500 text-white px-4 py-2 rounded flex items-center">
          <Plus className="mr-2 h-4 w-4" /> Add Note
        </button>
      </div>
      <div className="space-y-4">
        {notes.map(note => (
          <div key={note.id} className="border rounded overflow-hidden">
            <div className="flex justify-between items-center bg-gray-100 p-2">
              <h3 className="font-bold truncate flex-grow">{note.title}</h3>
              <div className="flex">
                <button onClick={() => openEditModal(note)} className="mr-2">
                  <Pencil className="h-5 w-5 text-blue-500" />
                </button>
                <button onClick={() => deleteNote(note.id)}>
                  <Trash2 className="h-5 w-5 text-red-500" />
                </button>
              </div>
            </div>
            <div className="p-2 whitespace-pre-wrap">{note.content}</div>
          </div>
        ))}
      </div>
      
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2 className="text-xl font-bold mb-4">Edit Note</h2>
        <input
          type="text"
          value={editingNote?.title || ''}
          onChange={(e) => setEditingNote({...editingNote, title: e.target.value})}
          placeholder="Note Title"
          className="w-full p-2 border rounded mb-2"
        />
        <textarea
          value={editingNote?.content || ''}
          onChange={(e) => setEditingNote({...editingNote, content: e.target.value})}
          placeholder="Note Content"
          className="w-full p-2 border rounded h-48 mb-4"
        />
        <button onClick={saveEdit} className="bg-blue-500 text-white px-4 py-2 rounded">
          Save Changes
        </button>
      </Modal>
    </div>
  );
};

export default NotesApp;