xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
33 lines (32 loc) • 1.94 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { motion } from "framer-motion";
let interval;
export const CardStack = ({ items, offset, scaleFactor, }) => {
const CARD_OFFSET = offset || 10;
const SCALE_FACTOR = scaleFactor || 0.06;
const [cards, setCards] = useState(items);
useEffect(() => {
startFlipping();
return () => clearInterval(interval);
}, []);
const startFlipping = () => {
interval = setInterval(() => {
setCards((prevCards) => {
const newArray = [...prevCards]; // create a copy of the array
newArray.unshift(newArray.pop()); // move the last element to the front
return newArray;
});
}, 5000);
};
return (_jsx("div", { className: "relative h-60 w-60 md:h-60 md:w-96", children: cards.map((card, index) => {
return (_jsxs(motion.div, { 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", style: {
transformOrigin: "top center",
}, animate: {
top: index * -CARD_OFFSET,
scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
zIndex: cards.length - index, // decrease z-index for the cards that are behind
}, children: [_jsx("div", { className: "font-normal text-neutral-700 dark:text-neutral-200", children: card.content }), _jsxs("div", { children: [_jsx("p", { className: "text-neutral-500 font-medium dark:text-white", children: card.name }), _jsx("p", { className: "text-neutral-400 font-normal dark:text-neutral-200", children: card.designation })] })] }, card.id));
}) }));
};