// Plaaayground v2 — DragHandle
// Blueprint: 06 — Drag affordance icon with grab/grabbing cursor

import { GripVertical } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DragHandleProps {
  className?: string;
}

export function DragHandle({ className, ...props }: DragHandleProps & React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "flex items-center justify-center cursor-grab active:cursor-grabbing",
        "text-muted-foreground/40 hover:text-muted-foreground transition-colors",
        "touch-none select-none",
        className
      )}
      aria-label="Drag handle"
      role="button"
      tabIndex={0}
      {...props}
    >
      <GripVertical className="w-4 h-4" />
    </div>
  );
}
DragHandle

Source Code
