Bento Grid

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface BentoGridItem {
7  description?: string;
8  icon?: React.ReactNode;
9  span?: "1x1" | "2x1" | "1x2" | "2x2";
10  title: string;
11  variant?: "default" | "highlight";
12}
13 
14interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
15  columns?: 2 | 3 | 4;
16  items: BentoGridItem[];
17}
18 
19const spanMap: Record<string, string> = {
20  "1x1": "",
21  "1x2": "md:row-span-2",
22  "2x1": "md:col-span-2",
23  "2x2": "md:col-span-2 md:row-span-2",
24};
25 
26const colsMap: Record<number, string> = {
27  2: "md:grid-cols-2",
28  3: "md:grid-cols-3",
29  4: "md:grid-cols-4",
30};
31 
32export function BentoGrid({
33  items,
34  columns = 3,
35  className,
36  ...props
37}: BentoGridProps) {
38  // Stagger card reveal
39  const [revealedIdx, setRevealedIdx] = React.useState(-1);
40  React.useEffect(() => {
41    let idx = 0;
42    const interval = setInterval(() => {
43      setRevealedIdx(idx);
44      idx++;
45      if (idx >= items.length) {
46        clearInterval(interval);
47      }
48    }, 80);
49    return () => clearInterval(interval);
50  }, [items.length]);
51 
52  return (
53    <div
54      data-slot="tron-bento-grid"
55      className={cn("grid grid-cols-1 gap-3", colsMap[columns], className)}
56      {...props}
57    >
58      {items.map((item, i) => (
59        <div
60          key={i}
61          className={cn(
62            "group relative overflow-hidden rounded border bg-card/80 p-5 backdrop-blur-sm transition-all duration-400",
63            item.variant === "highlight"
64              ? "border-primary/50 shadow-[0_0_20px_rgba(var(--primary-rgb,0,180,255),0.06)]"
65              : "border-primary/20",
66            spanMap[item.span || "1x1"],
67            i <= revealedIdx
68              ? "translate-y-0 opacity-100"
69              : "translate-y-3 opacity-0"
70          )}
71        >
72          {/* Scanline overlay */}
73          <div className="pointer-events-none absolute inset-0 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.03)_2px,rgba(0,0,0,0.03)_4px)]" />
74 
75          {/* Hover glow sweep */}
76          <div className="pointer-events-none absolute -inset-px rounded opacity-0 transition-opacity duration-500 group-hover:opacity-100">
77            <div
78              className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/8 to-transparent"
79              style={{ animation: "bentoSweep 2s ease-in-out infinite" }}
80            />
81          </div>
82 
83          <div className="relative">
84            {item.icon ? (
85// … truncated