Feature bento

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

type FeatureBentoProps = Omit<React.ComponentProps<"section">, "title"> & {
  /** Optional section heading above the tiles. */
  title?: React.ReactNode;
  /** Optional grey lead under the heading. */
  description?: React.ReactNode;
  /** BentoCell elements. */
  children: React.ReactNode;
};

/**
 * A feature section built as a bento of mixed tiles. One frame paints the hairlines through a 1px gap,
 * each cell paints its own fill. Four columns from the container's 2xl width, one below. Server component.
 */
export function FeatureBento({ title, description, className, children, ...props }: FeatureBentoProps) {
  return (
    <section className={cn("@container w-full py-8 @2xl:py-16", className)} {...props}>
      <div className="mx-auto w-full max-w-6xl px-4 @2xl:px-6">
        {(title || description) && (
          <div className="mb-8 flex max-w-2xl flex-col gap-3 @2xl:mb-12">
            {title && (
              <h2 className="m-0 text-xl leading-tight font-medium tracking-tight text-balance @2xl:text-3xl">
                {title}
              </h2>
            )}
            {description && <p className="m-0 text-sm text-muted-foreground @2xl:text-base">{description}</p>}
          </div>
        )}
        <div className="surface-shine grid gap-px overflow-hidden rounded-lg border bg-border @2xl:grid-cols-4">
          {children}
        </div>
      </div>
    </section>
  );
}

const SPAN = {
  wide: "@2xl:col-span-2",
  tall: "@2xl:row-span-2",
  big: "@2xl:col-span-2 @2xl:row-span-2",
  small: "",
} as const;

type BentoCellProps = Omit<React.ComponentProps<"div">, "title"> & {
  /** Cell title, one short line. */
  title: React.ReactNode;
  /** One sentence under the title. */
  description?: React.ReactNode;
  /** Footprint: small is 1x1, wide 2x1, tall 1x2, big 2x2 columns by rows. */
  size?: keyof typeof SPAN;
  /** The visual above the text: a number, a list, a code line, a mini interface. */
  children?: React.ReactNode;
};

/** One cell of a FeatureBento: a visual on top, the title and a grey line below. */
export function BentoCell({ title, description, size = "small", className, children, ...props }: BentoCellProps) {
  return (
    <div
      data-slot="bento-cell"
      className={cn("flex min-w-0 flex-col justify-between gap-6 bg-card p-5 @2xl:p-6", SPAN[size], className)}
      {...props}
    >
      {children && <div className="flex min-h-0 flex-1 flex-col justify-center">{children}</div>}
      <div className="flex flex-col gap-1">
        <h3 className="m-0 text-sm font-medium text-foreground/85">{title}</h3>
        {description && <p className="m-0 text-sm text-muted-foreground">{description}</p>}
      </div>
    </div>
  );
}