Kanban

1"use client";23import { useMemo, useState, type ReactNode } from "react";4import {5  DndContext,6  DragOverlay,7  PointerSensor,8  closestCorners,9  useDroppable,10  useSensor,11  useSensors,12  type DragEndEvent,13  type DragOverEvent,14  type DragStartEvent,15} from "@dnd-kit/core";16import {17  SortableContext,18  arrayMove,19  useSortable,20  verticalListSortingStrategy,21} from "@dnd-kit/sortable";22import { CSS } from "@dnd-kit/utilities";23import { cn } from "@/lib/utils";2425type Kanban01Props = {26  className?: string;27};2829type Card = {30  id: string;31  title: string;32  meta: string;33};3435type Column = {36  id: string;37  title: string;38  cards: Card[];39};4041const INITIAL: Column[] = [42  {43    id: "todo",44    title: "To do",45    cards: [46      { id: "t1", title: "Map pricing tiers", meta: "Marketing" },47      { id: "t2", title: "Collect launch assets", meta: "Design" },48    ],49  },50  {51    id: "doing",52    title: "In progress",53    cards: [54      { id: "t3", title: "Ship hero-05 polish", meta: "Product" },55      { id: "t4", title: "Write FAQ answers", meta: "Content" },56    ],57  },58  {59    id: "done",60    title: "Done",61    cards: [{ id: "t5", title: "Navbar variants", meta: "Engineering" }],62  },63];6465function findColumnId(columns: Column[], id: string) {66  if (columns.some((column) => column.id === id)) return id;67  return columns.find((column) => column.cards.some((card) => card.id === id))68    ?.id;69}7071function CardBody({ card }: { card: Card }) {72  return (73    <>74      <p className="text-sm font-medium tracking-wide text-foreground">75        {card.title}76      </p>77      <p className="mt-1 text-xs tracking-wide text-muted-foreground">78        {card.meta}79      </p>80    </>81  );82}8384function SortableCard({85  card,86  className,87}: {88  card: Card;89  className?: string;90}) {91  const {92    attributes,93    listeners,94    setNodeRef,95    transform,96    transition,97    isDragging,98  } = useSortable({ id: card.id });99100  return (101    <li102      ref={setNodeRef}103      style={{104        transform: CSS.Transform.toString(transform),105        transition,106      }}107      className={cn(108        "cursor-grab rounded-lg bg-background px-3 py-3 active:cursor-grabbing",109        isDragging && "opacity-0",110        className,111      )}112      {...attributes}113      {...listeners}114    >115      <CardBody card={card} />116    </li>117  );118}119120function ColumnDrop({121  id,122  children,123  empty,124}: {125  id: string;126  children: ReactNode;127  empty: boolean;128}) {129  const { setNodeRef } = useDroppable({ id });130131  return (132    <ul133      ref={setNodeRef}134      className="flex flex-col gap-2 rounded-xl bg-muted p-2"135    >136      {empty ? (137        <li className="rounded-lg border border-dashed border-border px-3 py-3 text-center text-xs tracking-wide text-muted-foreground">138          Empty139        </li>140      ) : (141        children142      )}143    </ul>144  );145}146147export function Kanban01({ className }: Kanban01Props) {148  const [columns, setColumns] = useState(INITIAL);149  const [activeId, setActiveId] = useState<string | null>(null);150  const sensors = useSensors(151    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),152  );153154  const activeCard = useMemo(() => {155    if (!activeId) return null;156    for (const column of columns) {157      const card = column.cards.find((item) => item.id === activeId);158      if (card) return card;159    }160    return null;161  }, [activeId, columns]);162163  function handleDragStart(event: DragStartEvent) {164    setActiveId(String(event.active.id));165  }166167  function handleDragOver(event: DragOverEvent) {168    const { active, over } = event;169    if (!over) return;170171    const activeCardId = String(active.id);172    const overId = String(over.id);173174    setColumns((current) => {175      const fromId = findColumnId(current, activeCardId);176      const toId = findColumnId(current, overId);177      if (!fromId || !toId || fromId === toId) return current;178179      const fromColumn = current.find((column) => column.id === fromId);180      const toColumn = current.find((column) => column.id === toId);181      if (!fromColumn || !toColumn) return current;182183      const moving = fromColumn.cards.find((card) => card.id === activeCardId);184      if (!moving) return current;185186      const overIndex = toColumn.cards.findIndex((card) => card.id === overId);187      const insertIndex = overIndex >= 0 ? overIndex : toColumn.cards.length;188189      return current.map((column) => {190        if (column.id === fromId) {191          return {192            ...column,193            cards: column.cards.filter((card) => card.id !== activeCardId),194          };195        }196        if (column.id === toId) {197          const next = column.cards.filter((card) => card.id !== activeCardId);198          next.splice(insertIndex, 0, moving);199          return { ...column, cards: next };200        }201        return column;202      });203    });204  }205206  function handleDragEnd(event: DragEndEvent) {207    const { active, over } = event;208    setActiveId(null);209    if (!over) return;210211    const activeCardId = String(active.id);212    const overId = String(over.id);213214    setColumns((current) => {215      const columnId = findColumnId(current, activeCardId);216      if (!columnId) return current;217      if (findColumnId(current, overId) !== columnId) return current;218219      const column = current.find((item) => item.id === columnId);220      if (!column) return current;221222      const oldIndex = column.cards.findIndex((card) => card.id === activeCardId);223      const newIndex =224        overId === columnId225          ? column.cards.length - 1226          : column.cards.findIndex((card) => card.id === overId);227228      if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) return current;229230      return current.map((item) =>231        item.id === columnId232          ? { ...item, cards: arrayMove(item.cards, oldIndex, newIndex) }233          : item,234      );235    });236  }237238  return (239    <section className={cn("@container w-full bg-background", className)}>240      <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">241        <div>242          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">243            Sprint board244          </h2>245          <p className="mt-2 text-sm tracking-wide text-muted-foreground">246            Drag cards — others shift to make room.247          </p>248        </div>249250        <DndContext251          id="kanban-01"252          sensors={sensors}253          collisionDetection={closestCorners}254          onDragStart={handleDragStart}255          onDragOver={handleDragOver}256          onDragEnd={handleDragEnd}257        >258          <div className="mt-8 flex flex-col gap-6 @[40rem]:grid @[40rem]:grid-cols-3 @[40rem]:gap-4">259            {columns.map((column) => (260              <div key={column.id} className="flex w-full flex-col gap-3">261                <div className="flex items-center justify-between gap-2 px-1">262                  <h3 className="text-sm font-medium tracking-wide text-foreground">263                    {column.title}264                  </h3>265                  <span className="text-xs tracking-wide text-muted-foreground tabular-nums">266                    {column.cards.length}267                  </span>268                </div>269                <SortableContext270                  id={`kanban-01-${column.id}`}271                  items={column.cards.map((card) => card.id)}272                  strategy={verticalListSortingStrategy}273                >274                  <ColumnDrop275                    id={column.id}276                    empty={column.cards.length === 0}277                  >278                    {column.cards.map((card) => (279                      <SortableCard key={card.id} card={card} />280                    ))}281                  </ColumnDrop>282                </SortableContext>283              </div>284            ))}285          </div>286287          <DragOverlay>288            {activeCard ? (289              <div className="cursor-grabbing rounded-lg bg-background px-3 py-3 ring-1 ring-border">290                <CardBody card={activeCard} />291              </div>292            ) : null}293          </DragOverlay>294        </DndContext>295      </div>296    </section>297  );298}

1"use client";23import { useMemo, useState, type ReactNode } from "react";4import {5  DndContext,6  DragOverlay,7  PointerSensor,8  closestCorners,9  useDroppable,10  useSensor,11  useSensors,12  type DragEndEvent,13  type DragOverEvent,14  type DragStartEvent,15} from "@dnd-kit/core";16import {17  SortableContext,18  arrayMove,19  useSortable,20  verticalListSortingStrategy,21} from "@dnd-kit/sortable";22import { CSS } from "@dnd-kit/utilities";23import { Avatar, AvatarFallback } from "@/components/ui/avatar";24import { Badge } from "@/components/ui/badge";25import { Button } from "@/components/ui/button";26import { cn } from "@/lib/utils";2728type Kanban02Props = {29  className?: string;30};3132type Card = {33  id: string;34  title: string;35  priority: "Low" | "Med" | "High";36  assignee: string;37};3839type Column = {40  id: string;41  title: string;42  cards: Card[];43};4445const INITIAL: Column[] = [46  {47    id: "backlog",48    title: "Backlog",49    cards: [50      {51        id: "c1",52        title: "Audit unused tokens",53        priority: "Low",54        assignee: "MC",55      },56      {57        id: "c2",58        title: "Draft onboarding email",59        priority: "Med",60        assignee: "JH",61      },62    ],63  },64  {65    id: "active",66    title: "Active",67    cards: [68      {69        id: "c3",70        title: "Checkout promo field",71        priority: "High",72        assignee: "RK",73      },74    ],75  },76  {77    id: "review",78    title: "Review",79    cards: [80      {81        id: "c4",82        title: "Gallery marquee pass",83        priority: "Med",84        assignee: "MC",85      },86    ],87  },88];8990function findColumnId(columns: Column[], id: string) {91  if (columns.some((column) => column.id === id)) return id;92  return columns.find((column) => column.cards.some((card) => card.id === id))93    ?.id;94}9596function CardBody({ card }: { card: Card }) {97  return (98    <>99      <div className="flex items-start justify-between gap-2">100        <p className="text-sm font-medium tracking-wide text-foreground">101          {card.title}102        </p>103        <Badge variant={card.priority === "High" ? "default" : "secondary"}>104          {card.priority}105        </Badge>106      </div>107      <div className="mt-3 flex items-center gap-2">108        <Avatar size="xs">109          <AvatarFallback>{card.assignee}</AvatarFallback>110        </Avatar>111        <span className="text-xs tracking-wide text-muted-foreground">112          {card.assignee}113        </span>114      </div>115    </>116  );117}118119function SortableCard({ card }: { card: Card }) {120  const {121    attributes,122    listeners,123    setNodeRef,124    transform,125    transition,126    isDragging,127  } = useSortable({ id: card.id });128129  return (130    <li131      ref={setNodeRef}132      style={{133        transform: CSS.Transform.toString(transform),134        transition,135      }}136      className={cn(137        "cursor-grab rounded-xl border border-border bg-background px-3 py-3 active:cursor-grabbing",138        isDragging && "opacity-0",139      )}140      {...attributes}141      {...listeners}142    >143      <CardBody card={card} />144    </li>145  );146}147148function PlusIcon({ className }: { className?: string }) {149  return (150    <svg151      viewBox="0 0 24 24"152      fill="none"153      stroke="currentColor"154      strokeWidth="2"155      strokeLinecap="round"156      strokeLinejoin="round"157      aria-hidden="true"158      className={className}159    >160      <path d="M12 5v14" />161      <path d="M5 12h14" />162    </svg>163  );164}165166function ColumnDrop({167  id,168  children,169  empty,170}: {171  id: string;172  children: ReactNode;173  empty: boolean;174}) {175  const { setNodeRef } = useDroppable({ id });176177  return (178    <ul ref={setNodeRef} className="flex flex-col gap-2">179      {empty ? (180        <li className="rounded-xl border border-dashed border-border px-3 py-3 text-center text-xs tracking-wide text-muted-foreground">181          Empty182        </li>183      ) : (184        children185      )}186    </ul>187  );188}189190export function Kanban02({ className }: Kanban02Props) {191  const [columns, setColumns] = useState(INITIAL);192  const [activeId, setActiveId] = useState<string | null>(null);193  const sensors = useSensors(194    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),195  );196197  const activeCard = useMemo(() => {198    if (!activeId) return null;199    for (const column of columns) {200      const card = column.cards.find((item) => item.id === activeId);201      if (card) return card;202    }203    return null;204  }, [activeId, columns]);205206  function addCard(columnId: string) {207    setColumns((current) =>208      current.map((column) =>209        column.id === columnId210          ? {211              ...column,212              cards: [213                ...column.cards,214                {215                  id: `${columnId}-${Date.now()}`,216                  title: "New task",217                  priority: "Low",218                  assignee: "You",219                },220              ],221            }222          : column,223      ),224    );225  }226227  function handleDragStart(event: DragStartEvent) {228    setActiveId(String(event.active.id));229  }230231  function handleDragOver(event: DragOverEvent) {232    const { active, over } = event;233    if (!over) return;234235    const activeCardId = String(active.id);236    const overId = String(over.id);237238    setColumns((current) => {239      const fromId = findColumnId(current, activeCardId);240      const toId = findColumnId(current, overId);241      if (!fromId || !toId || fromId === toId) return current;242243      const fromColumn = current.find((column) => column.id === fromId);244      const toColumn = current.find((column) => column.id === toId);245      if (!fromColumn || !toColumn) return current;246247      const moving = fromColumn.cards.find((card) => card.id === activeCardId);248      if (!moving) return current;249250      const overIndex = toColumn.cards.findIndex((card) => card.id === overId);251      const insertIndex = overIndex >= 0 ? overIndex : toColumn.cards.length;252253      return current.map((column) => {254        if (column.id === fromId) {255          return {256            ...column,257            cards: column.cards.filter((card) => card.id !== activeCardId),258          };259        }260        if (column.id === toId) {261          const next = column.cards.filter((card) => card.id !== activeCardId);262          next.splice(insertIndex, 0, moving);263          return { ...column, cards: next };264        }265        return column;266      });267    });268  }269270  function handleDragEnd(event: DragEndEvent) {271    const { active, over } = event;272    setActiveId(null);273    if (!over) return;274275    const activeCardId = String(active.id);276    const overId = String(over.id);277278    setColumns((current) => {279      const columnId = findColumnId(current, activeCardId);280      if (!columnId) return current;281      if (findColumnId(current, overId) !== columnId) return current;282283      const column = current.find((item) => item.id === columnId);284      if (!column) return current;285286      const oldIndex = column.cards.findIndex((card) => card.id === activeCardId);287      const newIndex =288        overId === columnId289          ? column.cards.length - 1290          : column.cards.findIndex((card) => card.id === overId);291292      if (oldIndex < 0 || newIndex < 0 || oldIndex === newIndex) return current;293294      return current.map((item) =>295        item.id === columnId296          ? { ...item, cards: arrayMove(item.cards, oldIndex, newIndex) }297          : item,298      );299    });300  }301302  return (303    <section className={cn("@container w-full bg-background", className)}>304      <div className="mx-auto w-full max-w-5xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">305        <div>306          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">307            Team board308          </h2>309          <p className="mt-2 text-sm tracking-wide text-muted-foreground">310            Drag cards between columns — they make space as you move.311          </p>312        </div>313314        <DndContext315          id="kanban-02"316          sensors={sensors}317          collisionDetection={closestCorners}318          onDragStart={handleDragStart}319          onDragOver={handleDragOver}320          onDragEnd={handleDragEnd}321        >322          <div className="mt-8 flex flex-col gap-6 @[40rem]:grid @[40rem]:grid-cols-3 @[40rem]:gap-4">323            {columns.map((column) => (324              <div key={column.id} className="flex w-full flex-col gap-3">325                <div className="flex items-center justify-between gap-2 px-1">326                  <h3 className="text-sm font-medium tracking-wide text-foreground">327                    {column.title}328                  </h3>329                  <div className="flex items-center gap-1">330                    <span className="text-xs tracking-wide text-muted-foreground tabular-nums">331                      {column.cards.length}332                    </span>333                    <Button334                      type="button"335                      size="icon-sm"336                      variant="ghost"337                      aria-label={`Add task to ${column.title}`}338                      onClick={() => addCard(column.id)}339                    >340                      <PlusIcon />341                    </Button>342                  </div>343                </div>344                <SortableContext345                  id={`kanban-02-${column.id}`}346                  items={column.cards.map((card) => card.id)}347                  strategy={verticalListSortingStrategy}348                >349                  <ColumnDrop350                    id={column.id}351                    empty={column.cards.length === 0}352                  >353                    {column.cards.map((card) => (354                      <SortableCard key={card.id} card={card} />355                    ))}356                  </ColumnDrop>357                </SortableContext>358              </div>359            ))}360          </div>361362          <DragOverlay>363            {activeCard ? (364              <div className="cursor-grabbing rounded-xl border border-border bg-background px-3 py-3 ring-1 ring-border">365                <CardBody card={activeCard} />366              </div>367            ) : null}368          </DragOverlay>369        </DndContext>370      </div>371    </section>372  );373}