Spotlight Card Demo

1import { SpotlightCard } from "@/registry/loomui/spotlight-card"
2 
3const CARDS = [
4  {
5    title: "Copy, do not install",
6    body: "The source lands in your repo. Change it, delete half of it, rename it.",
7    href: "/docs/installation",
8  },
9  {
10    title: "Motion with a contract",
11    body: "Every component ships an off switch and respects reduced motion.",
12    href: "/docs/components/weave-text",
13  },
14]
15 
16export default function SpotlightCardDemo() {
17  return (
18    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
19      {CARDS.map((card) => (
20        <SpotlightCard key={card.title} interactive className="bg-card p-5">
21          <h3 className="text-sm font-medium">
22            {/* Stretched link: the whole card is the hit target, but the
23                accessible name and the href stay on a real anchor. */}
24            <a href={card.href} className="after:absolute after:inset-0">
25              {card.title}
26            </a>
27          </h3>
28          <p className="text-muted-foreground mt-2 text-sm">{card.body}</p>
29        </SpotlightCard>
30      ))}
31    </div>
32  )
33}