Bento grid

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

type BentoGridProps = React.ComponentProps<"div"> & {
  /** BentoTile elements. */
  children: React.ReactNode;
};

/**
 * One frame, many tiles. The frame paints the hairlines between tiles through a 1px gap,
 * each tile paints its own card fill. Twelve columns from lg, two from md, one below.
 */
export function BentoGrid({ className, ...props }: BentoGridProps) {
  return (
    <div
      data-slot="bento-grid"
      className={cn(
        "surface-shine grid w-full gap-px overflow-hidden rounded-lg border bg-border md:auto-rows-fr md:grid-cols-2 lg:grid-cols-12",
        className,
      )}
      {...props}
    />
  );
}

type Span = "1" | "2" | "3" | "tall";

const SPAN = {
  "1": "lg:col-span-4",
  "2": "md:col-span-2 lg:col-span-8",
  "3": "md:col-span-2 lg:col-span-12",
  tall: "md:row-span-2 lg:col-span-4 lg:row-span-2",
} as const;

type BentoTileProps = Omit<React.ComponentProps<"div">, "title"> & {
  /** The tile title, one short line. */
  title: React.ReactNode;
  /** One or two sentences under the title. */
  description?: React.ReactNode;
  /** How much of the frame the tile takes: a third, two thirds, the full row, or a third over two rows. */
  span?: Span;
  /** The visual, drawn above the text and given the spare height. */
  children?: React.ReactNode;
};

/** One tile: a visual on top, a title and a description below. */
export function BentoTile({ title, description, span = "1", className, children, ...props }: BentoTileProps) {
  return (
    <div
      data-slot="bento-tile"
      data-span={span}
      className={cn("flex min-w-0 flex-col gap-4 bg-card p-6", SPAN[span], className)}
      {...props}
    >
      {children && <div className="flex min-h-0 flex-1 flex-col">{children}</div>}
      <div className="flex flex-col gap-1">
        <h3 className="m-0 text-sm leading-5 font-medium text-foreground/85">{title}</h3>
        {description && <p className="m-0 text-sm text-muted-foreground">{description}</p>}
      </div>
    </div>
  );
}