1"use client";
2
3import { clsx } from "clsx";
4import { motion } from "framer-motion";
5
6export function BentoGrid({
7  dark = false,
8  className = "",
9  title = "",
10  description = "",
11  component,
12  fade = [],
13  height = "h-88",
14  enableTitle = true,
15  enableDescription = true,
16  isFull = false,
17}: {
18  dark?: boolean;
19  className?: string;
20  title?: React.ReactNode;
21  description?: React.ReactNode;
22  component: React.ReactNode;
23  fade?: ("top" | "bottom")[];
24  height?: string;
25  enableTitle?: boolean;
26  enableDescription?: boolean;
27  isFull?: boolean;
28}) {
29  return (
30    <motion.div
31      initial="idle"
32      whileHover="active"
33      variants={{ idle: {}, active: {} }}
34      data-dark={dark ? "true" : undefined}
35      className={clsx(
36        className,
37        "group relative flex flex-col overflow-hidden rounded-lg",
38        "bg-white dark:bg-zinc-950 shadow-sm ring-1 ring-black/5 dark:ring-white/5",
39        "data-[dark]:bg-zinc-950 data-[dark]:ring-white/5",
40        isFull && "h-full"
41      )}
42    >
43      <div
44        className={clsx(
45          "relative shrink-0",
46          !isFull && height,
47          isFull && "h-full"
48        )}
49      >
50        {component}
51        {fade.includes("top") && (
52          <div className="absolute inset-0 bg-gradient-to-b from-white to-50% group-data-[dark]:from-gray-950 group-data-[dark]:from-[-25%]" />
53        )}
54        {fade.includes("bottom") && (
55          <div className="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-950 group-data-[dark]:from-[-25%]" />
56        )}
57
58        {isFull && (enableTitle || enableDescription) && (
59          <div className="absolute bottom-0 left-0 right-0 p-10 bg-gradient-to-t from-black/70 to-transparent">
60            {enableTitle && (
61              <p className="mt-1 text-2xl/8 font-medium tracking-tight text-white">
62                {title}
63              </p>
64            )}
65            {enableDescription && (
66              <p className="mt-2 max-w-[600px] text-sm/6 text-gray-200">
67                {description}
68              </p>
69            )}
70          </div>
71        )}
72      </div>
73
74      {!isFull && (enableTitle || enableDescription) && (
75        <div className="relative p-10">
76          {enableTitle && (
77            <p className="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950 group-data-[dark]:text-white dark:text-white">
78              {title}
79            </p>
80          )}
81          {enableDescription && (
82            <p className="mt-2 max-w-[600px] text-sm/6 text-gray-600 group-data-[dark]:text-gray-400 dark:text-gray-400">
83              {description}
84            </p>
85          )}
86        </div>
87      )}
88    </motion.div>
89  );
90}
91