Introducing Kanban primitives

import { Card, CardBody } from '@chakra-ui/react'
import {
  Kanban,
  KanbanColumn,
  KanbanColumnHeader,
  KanbanColumnBody,
  KanbanColumnHandle,
  KanbanCard,
  KanbanDragOverlay,
} from '@saas-ui-pro/kanban'


const columnDefs: Record<string, { title: string }> = {
  todo: {
    title: 'Todo',
  },
  doing: {
    title: 'Doing',
  },
  done: {
    title: 'Done',
  },
}


export default function Basic() {
  return (
    <Kanban defaultItems={kanbanItems}>
      {({ columns, items, activeId }) => {
        return (
          <>
            {columns.map((columnId) => (
              <KanbanColumn id={columnId} minWidth="200px">
                <KanbanColumnHeader>
                  {columnDefs[columnId]?.title} ({items[columnId]?.length})
                </KanbanColumnHeader>
                <KanbanColumnBody>
                  {items[columnId].map((itemId) => {
                    return (
                      <KanbanCard id={itemId}>
                        <Card minHeight="80px" w="full" fontSize="sm">
                          <CardBody>{itemId}</CardBody>
                        </Card>
                      </KanbanCard>
                    )
                  })}
                </KanbanColumnBody>
              </KanbanColumn>
            ))}


            <KanbanDragOverlay>
              {activeId ? (
                <KanbanCard id={activeId}>
                  <Card
                    minHeight="80px"
                    w="full"
                    fontSize="sm"
                    cursor="grabbing"
                  >
                    <CardBody>{activeId}</CardBody>
                  </Card>
                </KanbanCard>
              ) : null}
            </KanbanDragOverlay>
          </>
        )
      }}
    </Kanban>
  )
}