Bento Grid

1import { cn } from "@/lib/utils"
2import { motion } from "framer-motion"
3import React, { ReactNode } from "react"
4 
5export interface BentoGridProps {
6  className?: string
7  children?: ReactNode
8}
9 
10const containerVariants = {
11  hidden: {},
12  visible: {
13    transition: {
14      staggerChildren: 0.1,
15    },
16  },
17}
18 
19export function BentoGrid({ className, children }: BentoGridProps) {
20  return (
21    <motion.div
22      variants={containerVariants}
23      initial="hidden"
24      whileInView="visible"
25      viewport={{ once: true, margin: "-50px" }}
26      className={cn(
27        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 w-full max-w-7xl mx-auto",
28        className
29      )}
30    >
31      {children}
32    </motion.div>
33  )
34}