Bento Grid

1'use client';
2 
3import * as React from 'react';
4import { cn } from '@/lib/utils';
5import { CardTilt, CardTiltContent } from '@/components/ui/card-tilt';
6 
7const BentoGrid = ({
8  className,
9  children,
10}: {
11  className?: string;
12  children?: React.ReactNode;
13}) => (
14  <div
15    className={cn(
16      'mx-auto grid max-w-7xl grid-cols-1 gap-4 md:auto-rows-[18rem] md:grid-cols-3',
17      className,
18    )}
19  >
20    {children}
21  </div>
22);
23 
24const BentoGridItem = ({
25  className,
26  containerClassName,
27  title,
28  description,
29  header,
30  icon,
31  disableTilt = false,
32}: {
33  className?: string;
34  containerClassName?: string;
35  title?: string | React.ReactNode;
36  description?: string | React.ReactNode;
37  header?: React.ReactNode;
38  icon?: React.ReactNode;
39  disableTilt?: boolean;
40}) => {
41  const inner = (
42    <div
43      className={cn(
44        'group/bento shadow-input 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/20 dark:bg-black dark:shadow-none w-full h-full',
45        className,
46      )}
47    >
48      {header}
49      <div className='transition duration-300 group-hover/bento:-translate-y-1'>
50        {icon}
51        <div className='mt-2 mb-2 font-sans font-bold text-neutral-600 dark:text-neutral-200'>
52          {title}
53        </div>
54        <div className='font-sans text-xs font-normal text-neutral-600 dark:text-neutral-300'>
55          {description}
56        </div>
57      </div>
58    </div>
59  );
60 
61  if (disableTilt) {
62    return (
63      <div className={cn('w-full h-full', containerClassName)}>{inner}</div>
64    );
65  }
66 
67  return (
68    <CardTilt
69      className={cn('w-full h-full', containerClassName)}
70      tiltMaxAngle={12}
71      scale={1.03}
72    >
73      <CardTiltContent className='w-full h-full'>{inner}</CardTiltContent>
74    </CardTilt>
75  );
76};
77 
78export { BentoGrid, BentoGridItem };