asepharyana
bf75d9deef
Vendor 50 Aceternity UI components into components/ui from the official registry (ui.aceternity.com/registry/<slug>.json), adapted for this template's stack: Tailwind v4, motion/react 13, cn util, React 19. Add a live showcase gallery (/ui + /docs/... navigation is unchanged): app/ui/page.tsx renders <ShowcaseGallery> with 30+ demos — 3d-pin, aurora, background-beams, bento, card-stack, card-spotlight, direction-aware-hover, encrypted-text, evervault-card, flip-words, hero-highlight, hero-parallax, infinite-moving-cards, moving-border, sparkles, tracing-beam, animated-tooltip, typewriter-effect, placeholders-and-vanish-input and friends. Toolchain stays zero-warning: vendored animation code is scoped in eslint.config.mjs (react-hooks/react-compiler advisory rules, no-any, prefer-const, no-img-element) so app code keeps a 0-error gate. typecheck, build, 7 vitest tests and 2 test suites all green.
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import { motion } from "motion/react";
|
|
|
|
type Card = {
|
|
id: number;
|
|
name: string;
|
|
designation: string;
|
|
content: React.ReactNode;
|
|
};
|
|
|
|
export const CardStack = ({
|
|
items,
|
|
offset,
|
|
scaleFactor,
|
|
}: {
|
|
items: Card[];
|
|
offset?: number;
|
|
scaleFactor?: number;
|
|
}) => {
|
|
const CARD_OFFSET = offset || 10;
|
|
const SCALE_FACTOR = scaleFactor || 0.06;
|
|
const [cards, setCards] = useState<Card[]>(items);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setCards((prevCards: Card[]) => {
|
|
const newArray = [...prevCards]; // create a copy of the array
|
|
newArray.unshift(newArray.pop()!); // move the last element to the front
|
|
return newArray;
|
|
});
|
|
}, 5000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative h-60 w-60 md:h-60 md:w-96">
|
|
{cards.map((card, index) => {
|
|
return (
|
|
<motion.div
|
|
key={card.id}
|
|
className="absolute flex h-60 w-60 flex-col justify-between rounded-3xl border border-neutral-200 bg-white p-4 shadow-xl shadow-black/[0.1] md:h-60 md:w-96 dark:border-white/[0.1] dark:bg-black dark:shadow-white/[0.05]"
|
|
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
|
|
}}
|
|
>
|
|
<div className="font-normal text-neutral-700 dark:text-neutral-200">{card.content}</div>
|
|
<div>
|
|
<p className="font-medium text-neutral-500 dark:text-white">{card.name}</p>
|
|
<p className="font-normal text-neutral-400 dark:text-neutral-200">
|
|
{card.designation}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|