Bento Grid

1import { type ComponentPropsWithoutRef, type ReactNode } from "react"
2import { ArrowRightIcon } from "@radix-ui/react-icons"
3 
4import { cn } from "@/lib/utils"
5import { Button } from "@/components/ui/button"
6 
7interface BentoGridProps extends ComponentPropsWithoutRef<"div"> {
8  children: ReactNode
9  className?: string
10}
11 
12interface BentoCardProps extends ComponentPropsWithoutRef<"div"> {
13  name: string
14  className: string
15  background: ReactNode
16  Icon: React.ElementType
17  description: string
18  href: string
19  cta: string
20}
21 
22const BentoGrid = ({ children, className, ...props }: BentoGridProps) => {
23  return (
24    <div
25      className={cn(
26        "grid w-full auto-rows-[22rem] grid-cols-3 gap-4",
27        className
28      )}
29      {...props}
30    >
31      {children}
32    </div>
33  )
34}
35 
36const BentoCard = ({
37  name,
38  className,
39  background,
40  Icon,
41  description,
42  href,
43  cta,
44  ...props
45}: BentoCardProps) => (
46  <div
47    key={name}
48    className={cn(
49      "group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl",
50      // light styles
51      "bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]",
52      // dark styles
53      "dark:bg-background transform-gpu dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]",
54      className
55    )}
56    {...props}
57  >
58    <div>{background}</div>
59    <div className="p-4">
60      <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 transition-all duration-300 lg:group-hover:-translate-y-10">
61        <Icon className="h-12 w-12 origin-left transform-gpu text-neutral-700 transition-all duration-300 ease-in-out group-hover:scale-75" />
62        <h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
63          {name}
64        </h3>
65        <p className="max-w-lg text-neutral-400">{description}</p>
66      </div>
67 
68      <div
69        className={cn(
70          "pointer-events-none flex w-full translate-y-0 transform-gpu flex-row items-center transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 lg:hidden"
71        )}
72      >
73        <Button
74          variant="link"
75          asChild
76          size="sm"
77          className="pointer-events-auto p-0"
78        >
79          <a href={href}>
80            {cta}
81            <ArrowRightIcon className="ms-2 h-4 w-4 rtl:rotate-180" />
82          </a>
83        </Button>
84      </div>
85    </div>
86 
87    <div
88      className={cn(
89// … truncated