{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "phone-mockups-1", "title": "Phone Mockups 1", "description": "Solace UI phone mockups component variation 1.", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "button" ], "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": "\"use client\";\r\nimport type React from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport Image from \"next/image\";\r\nimport { ChevronLeft, ChevronRight, Pause, Play } from \"lucide-react\";\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { useIsMobile } from \"@/registry/components/phone-mockups/one/use-mobile\";\n\r\ninterface Iphone15ProProps extends React.SVGProps {\r\n width?: string | number;\r\n height?: string | number;\r\n src?: string;\r\n alt?: string;\r\n}\r\n\r\nconst Iphone15Pro: React.FC = ({\r\n width = \"100%\",\r\n height = \"auto\",\r\n src,\r\n alt = \"iPhone screen content\",\r\n className,\r\n ...props\r\n}) => {\r\n return (\r\n
\r\n \r\n {/* Outer frame */}\r\n \r\n {/* side nubs */}\r\n \r\n \r\n \r\n \r\n {/* inner body */}\r\n \r\n \r\n {/* screen area */}\r\n \r\n {src && (\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n {/* notch area */}\r\n \r\n \r\n \r\n {/* highlight */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport interface ImageItem {\r\n src: string;\r\n alt: string;\r\n}\r\n\r\ninterface PhoneCarouselProps {\r\n images: ImageItem[];\r\n className?: string;\r\n featureMode?: boolean;\r\n featuresData?: { images: ImageItem[] }[];\r\n activeFeatureIndex?: number;\r\n}\r\n\r\nexport const PhoneCarousel: React.FC = ({\r\n images,\r\n className,\r\n featureMode,\r\n featuresData,\r\n activeFeatureIndex = 0,\r\n}) => {\r\n const [isClient, setIsClient] = useState(false);\r\n const [currentIndex, setCurrentIndex] = useState(0);\r\n const [isPaused, setIsPaused] = useState(false);\r\n const [isHovering, setIsHovering] = useState(false);\r\n const carouselRef = useRef(null);\r\n const isMobile = useIsMobile();\r\n\r\n useEffect(() => {\r\n setIsClient(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (featureMode) return;\r\n\r\n let interval: NodeJS.Timeout;\r\n if (!isPaused && !isHovering) {\r\n interval = setInterval(() => {\r\n setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);\r\n }, 3000);\r\n }\r\n return () => clearInterval(interval);\r\n }, [isPaused, isHovering, images.length, featureMode]);\r\n\r\n if (!isClient) {\r\n return (\r\n
\r\n
\r\n
\r\n );\r\n }\r\n\r\n // FEATURE MODE\r\n if (featureMode && featuresData) {\r\n const total = featuresData.length;\r\n const active = activeFeatureIndex;\r\n const prev = (active - 1 + total) % total;\r\n const next = (active + 1) % total;\r\n\r\n // Each feature has a single image\r\n const prevImage = featuresData[prev].images[0];\r\n const activeImage = featuresData[active].images[0];\r\n const nextImage = featuresData[next].images[0];\r\n\r\n return (\r\n \r\n
\r\n {/* Center the phone stack */}\r\n
\r\n {/* 1) Back phone (prev) */}\r\n \r\n \r\n
\r\n\r\n {/* 2) Middle phone (next) */}\r\n \r\n \r\n
\r\n\r\n {/* 3) Front phone (active) */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n\r\n // NORMAL MODE\r\n const handlePrevious = () => {\r\n setCurrentIndex((prevIndex) =>\r\n prevIndex === 0 ? images.length - 1 : prevIndex - 1\r\n );\r\n };\r\n\r\n const handleNext = () => {\r\n setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);\r\n };\r\n\r\n const togglePause = () => {\r\n setIsPaused((prev) => !prev);\r\n };\r\n\r\n return (\r\n \r\n
\r\n
\r\n {/* Main carousel container */}\r\n setIsHovering(true)}\r\n onMouseLeave={() => setIsHovering(false)}\r\n >\r\n
\r\n {images.map((image, index) => {\r\n const isActive = index === currentIndex;\r\n const isPrevious =\r\n index === currentIndex - 1 ||\r\n (currentIndex === 0 && index === images.length - 1);\r\n const isNext =\r\n index === currentIndex + 1 ||\r\n (currentIndex === images.length - 1 && index === 0);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n })}\r\n
\r\n
\r\n\r\n {/* Controls */}\r\n
\r\n \r\n \r\n \r\n \r\n {isPaused ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n", "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" } ], "type": "registry:component" }