bento-grid

1import { cn } from "@/lib/utils";
2 
3export const BentoGrid = ({
4  className,
5  children,
6}: {
7  className?: string;
8  children?: React.ReactNode;
9}) => {
10  return (
11    <div
12      className={cn(
13        "mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3",
14        className,
15      )}
16    >
17      {children}
18    </div>
19  );
20};
21 
22export const BentoGridItem = ({
23  className,
24  title,
25  description,
26  header,
27  icon,
28}: {
29  className?: string;
30  title?: string | React.ReactNode;
31  description?: string | React.ReactNode;
32  header?: React.ReactNode;
33  icon?: React.ReactNode;
34}) => {
35  return (
36    <div
37      className={cn(
38        "group/bento shadow-input row-span-1 flex flex-col justify-between space-y-4 rounded-xl border border-neutral-200 bg-white p-4 transition duration-200 hover:shadow-xl dark:border-white/[0.2] dark:bg-black dark:shadow-none",
39        className,
40      )}
41    >
42      {header}
43      <div className="transition duration-200 group-hover/bento:translate-x-2">
44        {icon}
45        <div className="mt-2 mb-2 font-sans font-bold text-neutral-600 dark:text-neutral-200">
46          {title}
47        </div>
48        <div className="font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300">
49          {description}
50        </div>
51      </div>
52    </div>
53  );
54};