43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
import { Link } from 'react-router-dom';
|
||
|
|
import { useBoards } from '../hooks/useBoards';
|
||
|
|
import { BoardCard } from '../components/kanban/BoardCard';
|
||
|
|
|
||
|
|
export function Boards() {
|
||
|
|
const { boards, deleteBoard } = useBoards();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<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>
|
||
|
|
);
|
||
|
|
}
|