"use client"; import { getAllPeople, getAvatarUrl, type Person } from "@smoothui/data"; import { motion } from "motion/react"; import { useEffect, useState } from "react"; const CARDS_PER_VIEW = 3; // Number of cards visible at once const CARD_WIDTH = 288; const CARD_GAP = 16; const AUTOPLAY_INTERVAL = 5000; const TRANSITION_TIMEOUT = 1500; const AVATAR_SIZE = 160; const STAGGER_DELAY = 0.1; interface TeamCarouselProps { title?: string; subtitle?: string; description?: string; members?: Person[]; } export function TeamCarousel({ title = "Tech Pioneers", subtitle = "building the future", description = "We bring together brilliant developers, engineers, and tech innovators to create groundbreaking digital solutions.", members = getAllPeople(), }: TeamCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0); const [isAutoPlaying, setIsAutoPlaying] = useState(true); const [isTransitioning, setIsTransitioning] = useState(false); useEffect(() => { if (!isAutoPlaying || isTransitioning) { return; } const interval = setInterval(() => { setCurrentIndex( (prev) => (prev + 1) % (members.length - CARDS_PER_VIEW + 1) ); }, AUTOPLAY_INTERVAL); return () => clearInterval(interval); }, [members.length, isAutoPlaying, isTransitioning]); const nextSlide = () => { if (isTransitioning) { return; } const maxIndex = members.length - CARDS_PER_VIEW; if (currentIndex >= maxIndex) { return; } setIsTransitioning(true); setCurrentIndex((prev) => Math.min(prev + 1, maxIndex)); setIsAutoPlaying(false); setTimeout(() => { setIsTransitioning(false); setIsAutoPlaying(true); }, TRANSITION_TIMEOUT); }; const prevSlide = () => { if (isTransitioning) { return; } if (currentIndex <= 0) { return; } setIsTransitioning(true); setCurrentIndex((prev) => Math.max(prev - 1, 0)); setIsAutoPlaying(false); setTimeout(() => { setIsTransitioning(false); setIsAutoPlaying(true); }, TRANSITION_TIMEOUT); }; return (

{title}
{subtitle}

{description}

{/* Navigation Buttons */}

Previous slide = members.length - CARDS_PER_VIEW || isTransitioning } onClick={nextSlide} type="button" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > Next slide

{/* Carousel Content */}

{members.map((member, index) => (

{member.name}

{member.role}

{member.experience}

))}

); } export default TeamCarousel;

{title} {subtitle}

{title}
{subtitle}

Team Sections Blocks

Team Sections Blocks

Team Grid

Installation

Team Carousel

Installation