Bento Grid Demo

1import { BentoCard, BentoGrid } from "@/registry/loomui/bento-grid"
2 
3export default function BentoGridDemo() {
4  return (
5    <BentoGrid className="w-full max-w-2xl">
6      <BentoCard
7        className="sm:col-span-2"
8        title="Copied, not installed"
9        description="Every component lands in your repo as one file you own outright."
10      >
11        <div className="mt-4 flex gap-1.5">
12          {Array.from({ length: 5 }, (_, index) => (
13            <span
14              key={index}
15              className="bg-primary/15 h-8 flex-1 rounded"
16              style={{ opacity: 1 - index * 0.15 }}
17            />
18          ))}
19        </div>
20      </BentoCard>
21 
22      <BentoCard
23        title="Motion first"
24        description="Every piece animates for a reason."
25      />
26 
27      <BentoCard
28        title="Themed"
29        description="Light and dark from the same tokens."
30      />
31 
32      <BentoCard
33        className="sm:col-span-2"
34        title="No runtime"
35        description="No animation library, no provider, no context to wire up."
36        footer={
37          <span className="text-muted-foreground font-mono text-xs">
38            0 dependencies
39          </span>
40        }
41      />
42    </BentoGrid>
43  )
44}