card-stack

1"use client";
2import { useEffect, useState } from "react";
3import { motion } from "motion/react";
4 
5let interval: any;
6 
7type Card = {
8  id: number;
9  name: string;
10  designation: string;
11  content: React.ReactNode;
12};
13 
14export const CardStack = ({
15  items,
16  offset,
17  scaleFactor,
18}: {
19  items: Card[];
20  offset?: number;
21  scaleFactor?: number;
22}) => {
23  const CARD_OFFSET = offset || 10;
24  const SCALE_FACTOR = scaleFactor || 0.06;
25  const [cards, setCards] = useState<Card[]>(items);
26 
27  useEffect(() => {
28    startFlipping();
29 
30    return () => clearInterval(interval);
31  }, []);
32  const startFlipping = () => {
33    interval = setInterval(() => {
34      setCards((prevCards: Card[]) => {
35        const newArray = [...prevCards]; // create a copy of the array
36        newArray.unshift(newArray.pop()!); // move the last element to the front
37        return newArray;
38      });
39    }, 5000);
40  };
41 
42  return (
43    <div className="relative  h-60 w-60 md:h-60 md:w-96">
44      {cards.map((card, index) => {
45        return (
46          <motion.div
47            key={card.id}
48            className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1]  shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between"
49            style={{
50              transformOrigin: "top center",
51            }}
52            animate={{
53              top: index * -CARD_OFFSET,
54              scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
55              zIndex: cards.length - index, //  decrease z-index for the cards that are behind
56            }}
57          >
58            <div className="font-normal text-neutral-700 dark:text-neutral-200">
59              {card.content}
60            </div>
61            <div>
62              <p className="text-neutral-500 font-medium dark:text-white">
63                {card.name}
64              </p>
65              <p className="text-neutral-400 font-normal dark:text-neutral-200">
66                {card.designation}
67              </p>
68            </div>
69          </motion.div>
70        );
71      })}
72    </div>
73  );
74};