Sticker Peel Demo

1import { StickerPeel } from "@/registry/loomui/sticker-peel"
2 
3const STICKERS = [
4  { label: "Ships today", tone: "bg-accent text-accent-foreground" },
5  { label: "One file", tone: "bg-card text-card-foreground border" },
6  { label: "No deps", tone: "bg-primary text-primary-foreground" },
7] as const
8 
9export default function StickerPeelDemo() {
10  return (
11    <div className="flex flex-wrap items-center justify-center gap-6">
12      {STICKERS.map((sticker, index) => (
13        <StickerPeel
14          key={sticker.label}
15          corner={index === 1 ? "top-right" : "bottom-right"}
16          size="2.5rem"
17          className="size-32 rounded-xl"
18        >
19          <div
20            className={`grid h-full w-full place-items-center rounded-xl p-4 text-center text-sm font-medium ${sticker.tone}`}
21          >
22            {sticker.label}
23          </div>
24        </StickerPeel>
25      ))}
26    </div>
27  )
28}