Resizable card grid

CardGrid.tsxA CSS grid with a snap, a grip to move by, a corner to resize by, and an edit mode that is a required prop. Remove is delegated so the caller can undo it.Copy

import { useRef, type PointerEvent, type ReactNode } from "react";
import { GripVertical, X } from "lucide-react";
import { Card } from "@/components/ui/card";

/** Where a card sits, in grid units. Free pixels produce pages nobody can
 *  align; the columns do the tidying. */
export type Placement = { id: string; x: number; y: number; w: number; h: number };

type Props = {
  layout: Placement[];
  columns: number;
  rowHeight: number;
  /** Editing is a mode, and it is required. A grid that reorders on a stray
   *  drag trains people not to touch it. */
  editing: boolean;
  onChange: (layout: Placement[]) => void;
  /** Nothing else on the page deletes on one click, so the caller owns the undo. */
  onRemove: (id: string) => void;
  title: (id: string) => string;
  render: (id: string, size: { w: number; h: number }) => ReactNode;
};

export function CardGrid({ layout, columns, rowHeight, editing, onChange, onRemove, title, render }: Props) {
  const ref = useRef<HTMLDivElement>(null);

  /** One handler for move and resize: both are "this many cells from where
   *  the pointer went down", snapped, clamped to the grid. */
  const start = (e: PointerEvent<HTMLElement>, id: string, mode: "move" | "size") => {
    if (!editing || !ref.current) return;
    e.preventDefault();
    const colWidth = ref.current.clientWidth / columns;
    const from = layout.find((p) => p.id === id)!;
    const x0 = e.clientX, y0 = e.clientY;
    const el = e.currentTarget;
    el.setPointerCapture(e.pointerId);
    const move = (ev: globalThis.PointerEvent) => {
      const dx = Math.round((ev.clientX - x0) / colWidth);
      const dy = Math.round((ev.clientY - y0) / rowHeight);
      const next = mode === "move"
        ? { ...from, x: Math.min(Math.max(0, from.x + dx), columns - from.w), y: Math.max(0, from.y + dy) }
        : { ...from, w: Math.min(Math.max(1, from.w + dx), columns - from.x), h: Math.max(1, from.h + dy) };
      onChange(layout.map((p) => (p.id === id ? next : p)));
    };
    const up = () => { el.removeEventListener("pointermove", move); el.removeEventListener("pointerup", up); };
    el.addEventListener("pointermove", move);
    el.addEventListener("pointerup", up);
  };

  const rows = Math.max(3, ...layout.map((p) => p.y + p.h));
  return (
    <div
      ref={ref}
      className="relative grid gap-0"
      style={{
        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
        gridAutoRows: `${rowHeight}px`,
        minHeight: rows * rowHeight,
        // The snap grid, drawn only while it can be used.
        backgroundImage: editing
          ? `repeating-linear-gradient(to right, hsl(var(--border)) 0 1px, transparent 1px ${100 / columns}%), repeating-linear-gradient(to bottom, hsl(var(--border)) 0 1px, transparent 1px ${rowHeight}px)`
          : undefined,
      }}
    >
      {layout.map((p) => (
        <Card
          key={p.id}
          className="relative m-1 flex flex-col p-3"
          style={{ gridColumn: `${p.x + 1} / span ${p.w}`, gridRow: `${p.y + 1} / span ${p.h}` }}
        >
          <div className="flex items-center gap-2">
            {/* A grip, never the whole header. */}
            {editing && (
              <button type="button" onPointerDown={(e) => start(e, p.id, "move")} className="cursor-grab touch-none text-muted-foreground" aria-label={`move ${title(p.id)}`}>
                <GripVertical className="size-3.5" />
              </button>
            )}
            <span className="text-[11px] text-card-foreground">{title(p.id)}</span>
            {editing && (
              <button type="button" onClick={() => onRemove(p.id)} className="ml-auto text-muted-foreground" aria-label={`remove ${title(p.id)}`}>
                <X className="size-3.5" />
              </button>
            )}
          </div>
          <div className="mt-2 min-h-0 flex-1">{render(p.id, { w: p.w, h: p.h })}</div>
          {editing && (
            <span
              onPointerDown={(e) => start(e, p.id, "size")}
              className="absolute bottom-1 right-1 size-2 cursor-nwse-resize touch-none border-b-2 border-r-2 border-muted-foreground"
              role="separator" aria-label={`resize ${title(p.id)}`}
            />
          )}
        </Card>
      ))}
    </div>
  );
}

demo.tsxHow it is called: one card on four columns, editing on, with an undo stack for remove.Copy

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Sparkline } from "../sparkline/Sparkline";
import { CardGrid, type Placement } from "./CardGrid";

/**
 * One card on a four-column grid, in edit mode. Drag the grip to move it a
 * cell at a time, the corner to resize. Remove keeps the card in a stack so
 * the same button puts it back.
 */
const START: Placement[] = [{ id: "p95", x: 0, y: 0, w: 3, h: 2 }];
const TITLES: Record<string, string> = { p95: "P95 by service" };

export default function Demo() {
  const [layout, setLayout] = useState(START);
  const [removed, setRemoved] = useState<Placement[]>([]);
  const [editing, setEditing] = useState(true);

  const remove = (id: string) => {
    const card = layout.find((p) => p.id === id);
    if (!card) return;
    setRemoved([...removed, card]);
    setLayout(layout.filter((p) => p.id !== id));
  };
  const undo = () => {
    const last = removed[removed.length - 1];
    if (!last) return;
    setRemoved(removed.slice(0, -1));
    setLayout([...layout, last]);
  };

  return (
    <div className="w-[320px]">
      <CardGrid
        layout={layout}
        columns={4}
        rowHeight={60}
        editing={editing}
        onChange={setLayout}
        onRemove={remove}
        title={(id) => TITLES[id]}
        render={(_, size) => (
          <div className="text-chart-1">
            <Sparkline values={[28, 38, 30, 50, 44, 60, 56]} width={size.w * 80 - 32} height={size.h * 60 - 60} />
          </div>
        )}
      />
      <div className="mt-3 flex gap-2">
        <Button variant="outline" size="sm" onClick={() => setEditing(!editing)}>{editing ? "done" : "edit layout"}</Button>
        {removed.length > 0 && <Button variant="ghost" size="sm" onClick={undo}>undo remove</Button>}
      </div>
    </div>
  );
}