vt-fe/src/routes/_sidebar/kanban.tsx

import { createFileRoute } from '@tanstack/react-router'

import KanbanColumn from '@/features/Kanban/components/KanbanColumn'
import Kanban from '@/features/Kanban/components/Kanban'
import KanbanCard from '@/features/Kanban/components/KanbanCard'
import KanbanDropzone from '@/features/Kanban/components/KanbanDropzone'

export const Route = createFileRoute('/_sidebar/kanban')({
  component: RouteComponent,
})

const kanbanboard = {
  columns: [
    {
      name: 'Todo',
      itemCount: 5,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Doing',
      itemCount: 6,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Done',
      itemCount: 20,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Todo',
      itemCount: 5,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Doing',
      itemCount: 6,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Done',
      itemCount: 20,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Todo',
      itemCount: 5,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Doing',
      itemCount: 6,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Done',
      itemCount: 20,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Todo',
      itemCount: 5,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Doing',
      itemCount: 6,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
    {
      name: 'Done',
      itemCount: 20,
      children: [
        {
          name: 'Hello World!',
          path: 'https://google.com',
          description: 'Das ist eine Testkarte',
          labels: [
            {
              name: 'flow::7 Done',
              className: 'bg-emerald-500',
            },
            {
              name: 'Wichtig',
              className: 'bg-red-500',
            },
          ],
        },
      ],
    },
  ],
}

function RouteComponent() {
  return (
    <div className="h-full w-full">
      <Kanban>
        {kanbanboard.columns.map((val) => {
          return (
            <>
              <KanbanColumn name={val.name} itemCount={val.itemCount}>
                {val.children.map((card) => {
                  return <KanbanCard card={card} />
                })}
              </KanbanColumn>
              <KanbanDropzone />
            </>
          )
        })}
      </Kanban>
    </div>
  )
}