Tab Strip

import { TabStrip, TabStripAdd, TabStripItem } from "@/components/ui/tab-strip"

export function Example() {
  return (
    <div className="flex min-w-0 items-center gap-2">
      <TabStrip aria-label="Open documents">
        <TabStripItem icon={House} label="Home" active />
        <TabStripItem icon={Kanban} label="Q4 roadmap" onClose={() => close("roadmap")} />
      </TabStrip>
      <TabStripAdd onClick={() => open()} />
    </div>
  )
}

import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core"
import { SortableContext, horizontalListSortingStrategy, useSortable } from "@dnd-kit/sortable"

function SortableTab({ doc, active, onSelect, onClose }) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: doc.id })
  return (
    <TabStripItem
      ref={setNodeRef}
      icon={doc.icon}
      label={doc.title}
      active={active}
      dragging={isDragging}
      onClick={onSelect}
      onClose={onClose}
      style={{ transform: transform ? `translate3d(${transform.x}px, 0, 0)` : undefined, transition }}
      {...attributes}
      {...listeners}
    />
  )
}

export function SortableStrip({ docs, active, setActive, close, move }) {
  // 5px before a press becomes a drag: a click without moving still selects.
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }))
  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={({ active: from, over }) => over && from.id !== over.id && move(from.id, over.id)}
    >
      <SortableContext items={docs.map((d) => d.id)} strategy={horizontalListSortingStrategy}>
        <TabStrip aria-label="Open documents">
          {docs.map((doc) => (
            <SortableTab
              key={doc.id}
              doc={doc}
              active={doc.id === active}
              onSelect={() => setActive(doc.id)}
              onClose={() => close(doc.id)}
            />
          ))}
        </TabStrip>
      </SortableContext>
    </DndContext>
  )
}