50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4109,"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 */}

); }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@solaceui","registryDependencies":["button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/components/phone-mockups/one/index.tsx","content":"import React from \"react\";\r\nimport {\n ImageItem,\n PhoneCarousel,\n} from \"@/registry/components/phone-mockups/one/phone-carousel\";\n\r\nconst exampleImages: ImageItem[] = [\r\n {\r\n src: \"https://assets.solaceui.com/solaceui-Behance-screen.png\",\r\n alt: \"Behance app on iPhone\",\r\n },\r\n {\r\n src: \"https://assets.solaceui.com/solaceui-Notion-screen.png\",\r\n alt: \"Notion app on iPhone\",\r\n },\r\n {\r\n src: \"https://assets.solaceui.com/solaceui-One-screen.png\",\r\n alt: \"One app on iPhone\",\r\n },\r\n {\r\n src: \"https://assets.solaceui.com/solaceui-Reddit-nj7hwh.png\",\r\n alt: \"Reddit app on iPhone\",\r\n },\r\n];\r\n\r\nexport default function PhoneMockupBasic() {\r\n return ;\r\n}\r\n","type":"registry:component","target":"components/phone-mockups-1.tsx"},{"path":"src/registry/components/phone-mockups/one/phone-carousel.tsx","content":"$52","type":"registry:component","target":"components/phone-carousel.tsx"},{"path":"src/registry/components/phone-mockups/one/use-mobile.tsx","content":"import * as React from \"react\";\r\n\r\nconst MOBILE_BREAKPOINT = 768;\r\n\r\nexport function useIsMobile() {\r\n const [isMobile, setIsMobile] = React.useState(\r\n undefined\r\n );\r\n\r\n React.useEffect(() => {\r\n const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\r\n const onChange = () => {\r\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n };\r\n mql.addEventListener(\"change\", onChange);\r\n setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\r\n return () => mql.removeEventListener(\"change\", onChange);\r\n }, []);\r\n\r\n return !!isMobile;\r\n}\r\n","type":"registry:hook","target":"hooks/use-mobile.tsx"}],"className":"h-[70svh] min-h-80"}]]}]