81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Plus } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { useBoard } from "@/components/board/board-context";
|
|
|
|
export function AddCategoryLane() {
|
|
const { addCategory } = useBoard();
|
|
const [open, setOpen] = useState(false);
|
|
const [name, setName] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
const trimmed = name.trim();
|
|
if (!trimmed) return;
|
|
setPending(true);
|
|
await addCategory(trimmed);
|
|
setPending(false);
|
|
setName("");
|
|
setOpen(false);
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger
|
|
render={
|
|
<button
|
|
data-board-chrome=""
|
|
// Mobile: a full-width snap page below the lanes (stacked under
|
|
// the EmptyState, full-width next to them); desktop: the usual
|
|
// dashed lane at the end of the row.
|
|
className="flex h-40 w-full shrink-0 flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-border/80 text-muted-foreground transition-colors hover:border-primary/60 hover:bg-primary/5 hover:text-primary snap-start md:h-full md:min-h-32 md:w-72"
|
|
aria-label="Add category"
|
|
>
|
|
<span className="flex size-9 items-center justify-center rounded-full bg-foreground/5">
|
|
<Plus className="size-5" />
|
|
</span>
|
|
<span className="text-sm font-medium">Add lane</span>
|
|
</button>
|
|
}
|
|
/>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>New category</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="category-name">Name</Label>
|
|
<Input
|
|
id="category-name"
|
|
value={name}
|
|
maxLength={40}
|
|
autoFocus
|
|
onChange={(e) => setName(e.target.value)}
|
|
placeholder="e.g. In Progress"
|
|
/>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button type="submit" disabled={pending || !name.trim()}>
|
|
{pending ? "Creating…" : "Create category"}
|
|
</Button>
|
|
</DialogFooter>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|