feat: upgrade empty states with welcome message and column placeholders
This commit is contained in:
@@ -99,6 +99,11 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
|
|||||||
</li>
|
</li>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
{column.cardIds.length === 0 && (
|
||||||
|
<li className="flex min-h-[60px] items-center justify-center rounded-md border border-dashed border-pylon-text-secondary/20 text-xs text-pylon-text-secondary/50">
|
||||||
|
Drop or add a card
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
</ul>
|
</ul>
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
</SortableContext>
|
</SortableContext>
|
||||||
|
|||||||
@@ -24,14 +24,20 @@ export function BoardList() {
|
|||||||
if (boards.length === 0) {
|
if (boards.length === 0) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex h-full flex-col items-center justify-center gap-4">
|
<div className="flex h-full flex-col items-center justify-center gap-6">
|
||||||
<p className="font-mono text-sm text-pylon-text-secondary">
|
<div className="text-center">
|
||||||
Create your first board
|
<h2 className="font-heading text-2xl text-pylon-text">
|
||||||
|
Welcome to OpenPylon
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 max-w-sm text-sm text-pylon-text-secondary">
|
||||||
|
A local-first Kanban board that keeps your data on your machine.
|
||||||
|
Create your first board to get started.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center gap-2">
|
</div>
|
||||||
<Button onClick={() => setDialogOpen(true)}>
|
<div className="flex items-center gap-3">
|
||||||
|
<Button size="lg" onClick={() => setDialogOpen(true)}>
|
||||||
<Plus className="size-4" />
|
<Plus className="size-4" />
|
||||||
New Board
|
Create Board
|
||||||
</Button>
|
</Button>
|
||||||
<ImportExportButtons />
|
<ImportExportButtons />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user