direction-aware-tabs

1"use client"
2 
3import { BgAnimateButton } from "../ui/bg-animate-button"
4import { DirectionAwareTabs } from "../ui/direction-aware-tabs"
5 
6const DirectionAwareTabsDemo = ({}) => {
7  const tabs = [
8    {
9      id: 0,
10      label: "ocean",
11      content: (
12        <div className="border border-border/50 w-full flex flex-col items-center p-4 rounded-lg gap-3">
13          <BgAnimateButton animation="spin-fast" gradient="ocean">
14            Button
15          </BgAnimateButton>
16          <BgAnimateButton animation="spin" gradient="ocean">
17            Button
18          </BgAnimateButton>
19          <BgAnimateButton animation="spin-slow" gradient="ocean">
20            Button
21          </BgAnimateButton>
22        </div>
23      ),
24    },
25    {
26      id: 1,
27      label: "forest",
28      content: (
29        <div className="border border-border/50 w-full flex flex-col items-center p-4 rounded-lg gap-3">
30          <BgAnimateButton animation="spin-fast" gradient="forest">
31            Button
32          </BgAnimateButton>
33          <BgAnimateButton animation="spin" gradient="forest">
34            Button
35          </BgAnimateButton>
36          <BgAnimateButton animation="spin-slow" gradient="forest">
37            Button
38          </BgAnimateButton>
39        </div>
40      ),
41    },
42    {
43      id: 2,
44      label: "default",
45      content: (
46        <div className="border border-border/50 w-full flex flex-col items-center gap-3 p-4">
47          <BgAnimateButton animation="spin-fast" gradient="default">
48            Button
49          </BgAnimateButton>
50          <BgAnimateButton animation="spin" gradient="default">
51            Button
52          </BgAnimateButton>
53          <BgAnimateButton animation="spin-slow" gradient="default">
54            Button
55          </BgAnimateButton>
56        </div>
57      ),
58    },
59    {
60      id: 3,
61      label: "sunset",
62      content: (
63        <div className="border border-border/50 w-full flex flex-col items-center p-4 rounded-lg gap-3">
64          <BgAnimateButton animation="spin-fast" gradient="sunset">
65            Button
66          </BgAnimateButton>
67          <BgAnimateButton animation="spin" gradient="sunset">
68            Button
69          </BgAnimateButton>
70          <BgAnimateButton animation="spin-slow" gradient="sunset">
71            Button
72          </BgAnimateButton>
73        </div>
74      ),
75    },
76  ]
77 
78  return (
79    <div className="">
80      <DirectionAwareTabs tabs={tabs} />
81    </div>
82  )
83}
84 
85export DirectionAwareTabsDemo