Hairline grid

import * as React from "react";
import { cn } from "@/lib/utils";

type Columns = 2 | 3 | 4;

type HairlineGridProps = React.ComponentProps<"div"> & {
  /** Columns from the sm breakpoint up. One column below it. */
  columns?: Columns;
  /** Give every row the height of the tallest one. */
  equalRows?: boolean;
};

const COLUMNS: Record<Columns, string> = {
  2: "sm:grid-cols-2",
  3: "sm:grid-cols-2 lg:grid-cols-3",
  4: "sm:grid-cols-2 lg:grid-cols-4",
};

/**
 * One rounded frame whose cells share 1px hairlines, with no rounding inside.
 * Each cell draws its right and bottom edge; the grid hangs 1px over the frame so the outer edges hide.
 */
export function HairlineGrid({ columns = 3, equalRows = false, className, children, ...props }: HairlineGridProps) {
  return (
    <div
      data-slot="hairline-grid"
      data-columns={columns}
      className={cn("w-full overflow-hidden rounded-lg border bg-card text-card-foreground", className)}
      {...props}
    >
      <div className={cn("-mr-px -mb-px grid grid-cols-1", COLUMNS[columns], equalRows && "auto-rows-fr")}>
        {children}
      </div>
    </div>
  );
}

type HairlineCellProps = React.ComponentProps<"div"> & {
  /** Inner padding: none, 12px, 16px or 24px. */
  padding?: "none" | "sm" | "default" | "lg";
};

const PADDING = { none: "p-0", sm: "p-3", default: "p-4", lg: "p-6" } as const;

/** A cell. Put anything inside; it draws the hairlines itself. */
export function HairlineCell({ padding = "default", className, ...props }: HairlineCellProps) {
  return (
    <div
      data-slot="hairline-cell"
      className={cn("min-w-0 border-r border-b", PADDING[padding], className)}
      {...props}
    />
  );
}