Module 8: UI සහ Styling

// Inside NotesList.tsx return statement

<div className="row g-3"> {/* g-3 adds gaps between cards */}
  {notes.length > 0 ? (
    notes.map(note => (
      <div key={note.id} className="col-md-6 col-lg-4">
        <div className="card h-100">
          <div className="card-body d-flex flex-column">
            <h5 className="card-title">{note.title}</h5>
            <p className="card-text flex-grow-1">{note.content}</p>
            <small className="text-muted">
              {new Date(note.created_at).toLocaleDateString()}
            </small>
            <div className="mt-3">
              <button className="btn btn-sm btn-secondary me-2" onClick={() => handleEdit(note)}>Edit</button>
              <button className="btn btn-sm btn-danger" onClick={() => handleDelete(note.id)}>Delete</button>
            </div>
          </div>
        </div>
      </div>
    ))
  ) : (
    <div className="col-12">
      <p>You haven't created any notes yet.</p>
    </div>
  )}
</div>

'use client';

import { useEffect } from 'react';

interface ToastProps {
  message: string;
  type: 'success' | 'error';
  onClose: () => void;
}

export default function Toast({ message, type, onClose }: ToastProps) {
  useEffect(() => {
    const timer = setTimeout(() => {
      onClose();
    }, 3000); // Close the toast after 3 seconds

    return () => clearTimeout(timer);
  }, [onClose]);

  const bgColor = type === 'success' ? 'bg-success' : 'bg-danger';

  return (
    <div 
      className={`position-fixed top-0 end-0 p-3`} 
      style={{ zIndex: 1050 }}
    >
      <div className={`toast show ${bgColor} text-white`} role="alert">
        <div className="d-flex">
            <div className="toast-body">
                {message}
            </div>
            <button type="button" className="btn-close btn-close-white me-2 m-auto" onClick={onClose}></button>
        </div>
      </div>
    </div>
  );
}

// Inside components/NotesList.tsx

import { useState, useEffect } from 'react';
import Toast from './Toast'; // Import the Toast component

// ... inside the NotesList component function
const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

// Update handleDelete function
const handleDelete = async (id: number) => {
  if (confirm('Are you sure you want to delete this note?')) {
    await fetch(`/api/notes/${id}`, { method: 'DELETE' });
    setNotes(notes.filter(note => note.id !== id));
    setToast({ message: 'Note deleted successfully', type: 'success' }); // Show toast
  }
};

// Update handleUpdate function
const handleUpdate = async (e: React.FormEvent) => {
  // ... (existing code)
  if (res.ok) {
    // ... (existing code)
    setEditingNote(null);
    setToast({ message: 'Note updated successfully', type: 'success' }); // Show toast
  } else {
    setToast({ message: 'Failed to update note', type: 'error' }); // Show error toast
  }
};

// Inside the return statement, add the Toast component
return (
  <>
    {toast && <Toast message={toast.message} type={toast.type} onClose={() => setToast(null)} />}
    {/* ... rest of the component (notes grid and modal) ... */}
  </>
);