"use client"; import type React from "react"; import { useEffect, useState, useRef } from "react"; import Image from "next/image"; import { ChevronLeft, ChevronRight, Pause, Play } from "lucide-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { useIsMobile } from "@/registry/components/phone-mockups/one/use-mobile"; interface Iphone15ProProps extends React.SVGProps { width?: string | number; height?: string | number; src?: string; alt?: string; } const Iphone15Pro: React.FC = ({ width = "100%", height = "auto", src, alt = "iPhone screen content", className, ...props }) => { return (

); }; export interface ImageItem { src: string; alt: string; } interface PhoneCarouselProps { images: ImageItem[]; className?: string; featureMode?: boolean; featuresData?: { images: ImageItem[] }[]; activeFeatureIndex?: number; } export const PhoneCarousel: React.FC = ({ images, className, featureMode, featuresData, activeFeatureIndex = 0, }) => { const [isClient, setIsClient] = useState(false); const [currentIndex, setCurrentIndex] = useState(0); const [isPaused, setIsPaused] = useState(false); const [isHovering, setIsHovering] = useState(false); const carouselRef = useRef(null); const isMobile = useIsMobile(); useEffect(() => { setIsClient(true); }, []); useEffect(() => { if (featureMode) return; let interval: NodeJS.Timeout; if (!isPaused && !isHovering) { interval = setInterval(() => { setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); }, 3000); } return () => clearInterval(interval); }, [isPaused, isHovering, images.length, featureMode]); if (!isClient) { return (

); } // FEATURE MODE if (featureMode && featuresData) { const total = featuresData.length; const active = activeFeatureIndex; const prev = (active - 1 + total) % total; const next = (active + 1) % total; // Each feature has a single image const prevImage = featuresData[prev].images[0]; const activeImage = featuresData[active].images[0]; const nextImage = featuresData[next].images[0]; return (

{/* Center the phone stack */}

{/* 1) Back phone (prev) */}

{/* 2) Middle phone (next) */}

{/* 3) Front phone (active) */}

); } // NORMAL MODE const handlePrevious = () => { setCurrentIndex((prevIndex) => prevIndex === 0 ? images.length - 1 : prevIndex - 1 ); }; const handleNext = () => { setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length); }; const togglePause = () => { setIsPaused((prev) => !prev); }; return (

{/* Main carousel container */}

setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} >

{images.map((image, index) => { const isActive = index === currentIndex; const isPrevious = index === currentIndex - 1 || (currentIndex === 0 && index === images.length - 1); const isNext = index === currentIndex + 1 || (currentIndex === images.length - 1 && index === 0); return (

); })}

{/* Controls */}

); };

Prop	Type	Default	Description
videoSrc	string	-	URL of the video to be played (embed).
thumbnailSrc	string	-	URL of the thumbnail image.
thumbnailAlt	string	"Video thumbnail"	Alt text for the thumbnail image.
soundSrc	string	-	URL of the sound effect to play with the video.
enableSound	boolean	true	Whether the sound is enabled (plays soundSrc).

Phone Mockups

Component API