Spotify

52: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"] 53: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"] 54:T5e14,"use client" import { useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, } from "react" import { AlignJustify, AudioLines, Heart, Mic, Music, Pause, Play, SkipBack, SkipForward, Wifi, } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" export type DynamicIslandSize = | "default" | "compact" | "expanded" | "large" | "ultra" export interface IPhoneProps { /** Content to display on the screen */ children?: ReactNode /** Dynamic Island size preset */ dynamicIslandSize?: DynamicIslandSize /** Content to display inside the Dynamic Island when expanded */ dynamicIslandContent?: ReactNode /** Frame color variant */ frameColor?: "graphite" | "silver" | "gold" | "blue" /** Show status bar */ showStatusBar?: boolean /** Show home indicator */ showHomeIndicator?: boolean /** Custom time to display */ time?: string /** Battery level (0-100) */ batteryLevel?: number /** Signal strength (0-4) */ signalStrength?: number /** Callback when Dynamic Island is tapped */ onDynamicIslandTap?: () => void /** Callback when screen is tapped */ onScreenTap?: () => void /** Custom className for the container */ className?: string } const FRAME_COLORS = { graphite: { gradient: "linear-gradient(145deg, #454549 0%, #3d3d41 15%, #363839 30%, #3a3a3e 50%, #424246 70%, #3b3b3f 85%, #343438 100%)", button: "linear-gradient(180deg, #424246 0%, #3a3a3e 30%, #363839 50%, #3a3a3e 70%, #424246 100%)", }, silver: { gradient: "linear-gradient(145deg, #e8e8e8 0%, #d4d4d4 15%, #c0c0c0 30%, #d0d0d0 50%, #e0e0e0 70%, #cccccc 85%, #b8b8b8 100%)", button: "linear-gradient(180deg, #e0e0e0 0%, #c8c8c8 30%, #b0b0b0 50%, #c8c8c8 70%, #e0e0e0 100%)", }, gold: { gradient: "linear-gradient(145deg, #ff9544 0%, #f88535 15%, #F77E2D 30%, #f88535 50%, #ff9040 70%, #f88030 85%, #F77E2D 100%)", button: "linear-gradient(180deg, #ff9040 0%, #f88535 30%, #F77E2D 50%, #f88535 70%, #ff9040 100%)", }, blue: { gradient: "linear-gradient(145deg, #3f4459 0%, #383c50 15%, #32374B 30%, #383c50 50%, #3d4256 70%, #363a4e 85%, #32374B 100%)", button: "linear-gradient(180deg, #3d4256 0%, #383c50 30%, #32374B 50%, #383c50 70%, #3d4256 100%)", }, } type FrameColor = keyof typeof FRAME_COLORS /** Per-finish lighting for left rail; silver & blue reuse graphite preset. */ const LEFT_BUTTON_LIGHTING: Record< "graphite" | "gold", { beforeShadow: string afterClasses: string boxShadow: string } > = { graphite: { beforeShadow: "before:shadow-[inset_0_1px_0_rgba(255,255,255,0.22),inset_1px_0_0_rgba(255,255,255,0.15),inset_0_-1px_0_rgba(0,0,0,0.28)]", afterClasses: "after:bg-gradient-to-b after:from-black/50 after:via-black/20 after:to-transparent", boxShadow: ` -1px 0 0 0 rgba(255, 255, 255, 0.16), -2px 3px 5px -1px rgba(0, 0, 0, 0.34), -4px 5px 12px -2px rgba(0, 0, 0, 0.2), inset 1px 0 1px rgba(255, 255, 255, 0.12) `, }, gold: { beforeShadow: "before:shadow-[inset_0_1px_0_rgba(255,228,195,0.5),inset_1px_0_0_rgba(255,240,215,0.3),inset_0_-1px_0_rgba(115,52,18,0.38)]", afterClasses: "after:bg-gradient-to-b after:from-[rgba(72,36,14,0.58)] after:via-[rgba(72,36,14,0.22)] after:to-transparent", boxShadow: ` -1px 0 0 0 rgba(255, 246, 225, 0.24), -2px 3px 5px -1px rgba(48, 24, 8, 0.34), -4px 5px 12px -2px rgba(80, 40, 14, 0.2), inset 1px 0 1px rgba(255, 232, 205, 0.22) `, }, } function leftRailLighting(frameColor: FrameColor) { return frameColor === "gold" ? LEFT_BUTTON_LIGHTING.gold : LEFT_BUTTON_LIGHTING.graphite } function LeftRailButton({ frameColor, frameColorScheme, className, }: { frameColor: FrameColor frameColorScheme: (typeof FRAME_COLORS)[FrameColor] className?: string }) { const L = leftRailLighting(frameColor) return (

) } const DYNAMIC_ISLAND_SIZES = { default: { width: 110, height: 32, borderRadius: 16 }, compact: { width: 90, height: 28, borderRadius: 14 }, /** width ignored for motion — expanded uses nearly full screen width */ expanded: { width: 280, height: 56, borderRadius: 32 }, large: { width: 290, height: 120, borderRadius: 32 }, ultra: { width: 300, height: 180, borderRadius: 36 }, } function getIslandMotionAnimate(size: DynamicIslandSize) { const c = DYNAMIC_ISLAND_SIZES[size] // if (size === "expanded") { // return { // width: "calc(100% - 18px)", // borderRadius: c.borderRadius, // height: c.height, // }; // } return { width: c.width, borderRadius: c.borderRadius, height: c.height, } } export function IPhone17ProMax({ children, dynamicIslandSize = "default", dynamicIslandContent, frameColor = "graphite", showStatusBar = true, showHomeIndicator = true, time = "9:41", batteryLevel = 94, signalStrength = 2, onDynamicIslandTap, onScreenTap, className = "", }: IPhoneProps) { const [internalDynamicIslandSize, setInternalDynamicIslandSize] = useState(dynamicIslandSize) const frameColorScheme = FRAME_COLORS[frameColor] const handleDynamicIslandTap = () => { if (onDynamicIslandTap) { onDynamicIslandTap() } else { // Default behavior: toggle between default and expanded setInternalDynamicIslandSize((prev) => prev === "default" ? "expanded" : "default" ) } } // Sync with external prop changes if (dynamicIslandSize !== internalDynamicIslandSize && onDynamicIslandTap) { setInternalDynamicIslandSize(dynamicIslandSize) } return (

{/* Phone Container - iPhone 17 Pro Max aspect ratio */}

{/* Outer Shadow */}

{/* Titanium Frame */}

{/* Inner Black Bezel */}

{/* Screen */}

) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() onScreenTap() } }, } : {})} onClick={(e) => { e.stopPropagation() if (onScreenTap) { onScreenTap() return } handleDynamicIslandTap() }} > {/* Status Bar */} {showStatusBar && (

{/* Left side - Time */}

{time}

{/* Right side - Signal, WiFi, Battery */}

{/* Signal Bars */}

{[1, 2, 3, 4].map((i) => (

))}

{/* Battery */}

)} {/* Dynamic Island */} { e.stopPropagation() handleDynamicIslandTap() }} transition={{ type: "spring", stiffness: 400, damping: 30, }} > {internalDynamicIslandSize === "default" || internalDynamicIslandSize === "compact" ? ( {/* Camera lens inside Dynamic Island */}

) : ( {dynamicIslandContent || ( )} )} {/* Screen Content Area */}

{children}

{/* Home Indicator */} {showHomeIndicator && (

)}

{/* Side Buttons - Right Side (Power Button) */}

{/* Side Buttons - Left Side */} {/* Frame Highlights */}

) } const ISLAND_ART = "bg-linear-to-br from-pink-500 via-orange-400 to-violet-600 shadow-[inset_0_1px_2px_rgba(255,255,255,0.35)]" const MINI_WAVEFORM_BARS = [ { id: "a", h: 8 }, { id: "b", h: 18 }, { id: "c", h: 12 }, { id: "d", h: 12 }, { id: "e", h: 17 }, { id: "f", h: 24 }, { id: "g", h: 15 }, { id: "h", h: 20 }, { id: "i", h: 16 }, { id: "j", h: 21 }, { id: "k", h: 14 }, { id: "l", h: 18 }, ] as const function MiniWaveform({ className }: { className?: string }) { return (

{MINI_WAVEFORM_BARS.map(({ id, h }) => ( ))}

) } /** Spotify “circle + three arcs” mark (#1DB954), decorative only */ function SpotifyLogoMark({ className }: { className?: string }) { return ( ) } /** Green disc + dark waveform (Spotify-style app icon), decorative */ function SpotifyAppIcon({ className }: { className?: string }) { return (

) } const PAUSE_RING_R = 15 function PauseWithProgressRing({ progress = 0.75, className, }: { progress?: number className?: string }) { const circumference = 2 * Math.PI * PAUSE_RING_R const dashOffset = circumference * (1 - progress) return ( ) } // Default content shown in expanded Dynamic Island function DefaultDynamicIslandContent({ size }: { size: DynamicIslandSize }) { if (size === "expanded") { return (

RY X

Let You Go

) } if (size === "large") { return (

The Move

Space Rangers

1:20 -1:48

) } if (size === "ultra") { const ultraCtrl = "flex size-7.5 shrink-0 items-center justify-center rounded-full bg-white/[0.14] text-white ring-1 ring-gray-900/30" return (

0:42

RY X

Let You Go

{/* */}

1:40

3:20

) } return null } // Keep the old export for backwards compatibility export default IPhone17ProMax 51:["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/apple-iphone-17-pro.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]