kanban-app/frontend/src/pages/Boards.tsx

import { Link } from 'react-router-dom';
import { useBoards } from '../hooks/useBoards';
import { BoardCard } from '../components/kanban/BoardCard';
import { NarrowPageLayout } from '@/components/NarrowPageLayout';

export function Boards() {
  const { boards, deleteBoard } = useBoards();

  return (
    <NarrowPageLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">My Boards</h1>
            <p className="text-gray-400">Manage your Kanban boards</p>
          </div>
          <Link
            to="/boards/new"
            className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
          >
            + Create Board
          </Link>
        </div>

        {boards.length === 0 ? (
          <div className="text-center py-16">
            <p className="text-gray-400 text-lg mb-4">No boards yet</p>
            <Link
              to="/boards/new"
              className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition-colors inline-block"
            >
              Create your first board
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {boards.map((board) => (
              <BoardCard key={board.id} board={board} onDelete={deleteBoard} />
            ))}
          </div>
        )}
      </div>
    </NarrowPageLayout>
  );
}