card-deck

1"use client"
2 
3import React from "react"
4import { motion } from "framer-motion"
5import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
6import { Autoplay, EffectCards, Navigation, Pagination } from "swiper/modules"
7import { Swiper, SwiperSlide } from "swiper/react"
8 
9import "swiper/css/effect-cards"
10import "swiper/css/pagination"
11import "swiper/css/navigation"
12import "swiper/css"
13 
14import { cn } from "@/lib/utils"
15 
16interface CardDeckContainerProps {
17  children: React.ReactNode
18  className?: string
19  showPagination?: boolean
20  showNavigation?: boolean
21  autoplay?: boolean
22  spaceBetween?: number
23  enableInitialAnimation?: boolean
24}
25 
26interface CardDeckItemProps {
27  children: React.ReactNode
28  className?: string
29}
30 
31// New modular API components
32export function CardDeckContainer({
33  children,
34  className,
35  showPagination = false,
36  showNavigation = false,
37  autoplay = false,
38  spaceBetween = 40,
39  enableInitialAnimation = true,
40}: CardDeckContainerProps) {
41  const css = `
42  .card-deck {
43    padding: 20px 0 50px 0 !important;
44  }
45  .card-deck .swiper-slide {
46    overflow: visible !important;
47  }
48  .card-deck .swiper-slide-shadow-cards {
49    border-radius: 1.5rem !important;
50  }
51  `
52 
53  return (
54    <motion.div
55      initial={enableInitialAnimation ? { opacity: 0, translateY: 20 } : false}
56      animate={enableInitialAnimation ? { opacity: 1, translateY: 0 } : false}
57      transition={
58        enableInitialAnimation
59          ? {
60              duration: 0.3,
61              delay: 0.5,
62            }
63          : undefined
64      }
65      className={cn("relative w-full max-w-3xl overflow-visible", className)}
66    >
67      <style>{css}</style>
68 
69      <Swiper
70        spaceBetween={spaceBetween}
71        autoplay={
72          autoplay
73            ? {
74                delay: 1000,
75                disableOnInteraction: false,
76              }
77            : false
78        }
79        effect="cards"
80        grabCursor={true}
81        loop={false}
82        allowTouchMove={true}
83        touchRatio={1}
84        resistance={true}
85        resistanceRatio={0.85}
86        pagination={
87          showPagination
88            ? {
89                clickable: true,
90              }
91            : false
92        }
93        navigation={
94          showNavigation
95            ? {
96                nextEl: ".swiper-button-next",
97                prevEl: ".swiper-button-prev",
98              }
99            : false
100        }
101        className="card-deck h-[360px] w-[240px] sm:h-[420px] sm:w-[280px]"
102// … truncated