bg-animate-button

1import { BgAnimateButton } from "../ui/bg-animate-button"
2 
3type Gradients =
4  | "sunrise"
5  | "ocean"
6  | "candy"
7  | "default"
8  | "forest"
9  | "sunset"
10  | "nebula"
11 
12type Radius = "full" | "xl" | "2xl" | "3xl" | "sm"
13type Animations = "spin" | "pulse" | "spin-slow" | "spin-fast"
14 
15const gradients: Gradients[] = [
16  "sunrise",
17  "ocean",
18  "candy",
19  "forest",
20  "sunset",
21  "default",
22  "nebula",
23]
24const roundings: Radius[] = ["full", "xl", "2xl", "3xl", "sm"]
25const animations: Animations[] = ["spin", "pulse", "spin-slow", "spin-fast"]
26 
27export const BgAnimateButtonsDemo = () => {
28  return (
29    <div className="w-full max-w-4xl">
30      <div className=" sm:px-12 md:px-24 flex flex-col justify-center  rounded-lg space-y-4">
31        {/* Roundings Grid */}
32 
33        <div className="grid grid-cols-3 gap-4">
34          {roundings.slice(0, 2).map((rounding, i) => (
35            <BgAnimateButton
36              gradient={gradients[i + 1]}
37              key={rounding}
38              rounded={rounding}
39            >
40              {rounding}
41            </BgAnimateButton>
42          ))}
43        </div>
44        <div className="grid grid-cols-3 gap-4">
45          {roundings.slice(2, 5).map((rounding, i) => (
46            <BgAnimateButton
47              gradient={gradients[i + 1]}
48              key={rounding}
49              rounded={rounding}
50            >
51              {rounding}
52            </BgAnimateButton>
53          ))}
54        </div>
55 
56        {/* animations Grid */}
57        <div className="grid grid-cols-2 gap-4">
58          {animations.map((animations, i) => (
59            <BgAnimateButton
60              key={animations}
61              gradient={gradients[i + 2]}
62              variant="ghost"
63              animation={animations}
64            >
65              {animations}
66            </BgAnimateButton>
67          ))}
68        </div>
69      </div>
70    </div>
71  )
72}
73 
74export BgAnimateButtonsDemo