card-deck-demo-interactive

1import {
2  CardDeckContainer,
3  CardDeckItem,
4} from "@/components/ui/card-deck"
5 
6export default function CardDeckDemoInteractive() {
7  const images = [
8    {
9      src: "https://images.unsplash.com/photo-1517423440428-a5a00ad493e8?w=400&h=600&fit=crop",
10      alt: "Coffee Cup",
11    },
12    {
13      src: "https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=400&h=600&fit=crop",
14      alt: "Mountain Lake",
15    },
16    {
17      src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=600&fit=crop",
18      alt: "Nature Path",
19    },
20    {
21      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=600&fit=crop",
22      alt: "Mountain View",
23    },
24    {
25      src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=400&h=600&fit=crop",
26      alt: "Forest",
27    },
28  ]
29 
30  return (
31    <div className="flex h-full w-full items-center justify-center">
32      <CardDeckContainer autoplay>
33        {images.map((image, index) => (
34          <CardDeckItem key={index} className="rounded-3xl">
35            <img
36              className="h-full w-full rounded-3xl object-cover"
37              src={image.src}
38              alt={image.alt}
39            />
40          </CardDeckItem>
41        ))}
42      </CardDeckContainer>
43    </div>
44  )
45}