card-deck-yugioh-demo

1import {
2  CardDeckContainer,
3  CardDeckItem,
4} from "@/components/ui/card-deck"
5 
6export default function CardDeckYugiohDemo() {
7  const images = [
8    {
9      src: "/images/stock/yu-gi-oh/IMG_9598.JPG",
10      alt: "Yu-Gi-Oh Card 1",
11    },
12    {
13      src: "/images/stock/yu-gi-oh/IMG_9599.JPG",
14      alt: "Yu-Gi-Oh Card 2",
15    },
16    {
17      src: "/images/stock/yu-gi-oh/IMG_9600.JPG",
18      alt: "Yu-Gi-Oh Card 3",
19    },
20    {
21      src: "/images/stock/yu-gi-oh/IMG_9601.JPG",
22      alt: "Yu-Gi-Oh Card 4",
23    },
24    {
25      src: "/images/stock/yu-gi-oh/IMG_9602.JPG",
26      alt: "Yu-Gi-Oh Card 5",
27    },
28    {
29      src: "/images/stock/yu-gi-oh/IMG_9603.JPG",
30      alt: "Yu-Gi-Oh Card 6",
31    },
32    {
33      src: "/images/stock/yu-gi-oh/IMG_9604.JPG",
34      alt: "Yu-Gi-Oh Card 7",
35    },
36    {
37      src: "/images/stock/yu-gi-oh/IMG_9605.JPG",
38      alt: "Yu-Gi-Oh Card 8",
39    },
40  ]
41 
42  return (
43    <div className="my-6 flex h-full w-full items-center justify-center p-12">
44      <CardDeckContainer enableInitialAnimation={false}>
45        {images.map((image, index) => (
46          <CardDeckItem key={index} className="rounded-none">
47            <img
48              className="h-auto w-full object-cover"
49              src={image.src}
50              alt={image.alt}
51            />
52          </CardDeckItem>
53        ))}
54      </CardDeckContainer>
55    </div>
56  )
57}