iPhone Mockup

1"use client";
2 
3import { cn } from "@/lib/utils";
4 
5export interface IPhoneMockupProps {
6	/** Status bar time, e.g. "9:41" */
7	time?: string;
8	/** Screen background color (CSS color) */
9	screenBackground?: string;
10	/** Tint the status bar icons/time. "auto" picks based on screen background brightness */
11	statusBarTone?: "auto" | "light" | "dark";
12	/** Hide the status bar entirely (useful for full-screen apps that draw their own) */
13	hideStatusBar?: boolean;
14	/** Show a 5px home-indicator bar at the bottom */
15	homeIndicator?: boolean;
16	/** Tint the home indicator. "auto" picks based on screen background brightness */
17	homeIndicatorTone?: "auto" | "light" | "dark";
18	/** Outer chassis className overrides */
19	className?: string;
20	/** Inner screen className overrides */
21	screenClassName?: string;
22	children?: React.ReactNode;
23}
24 
25/**
26 * Realistic iPhone (Pro) mockup with Dynamic Island, side buttons,
27 * status bar and home indicator. 390 × 815 chassis, 10 px bezel,
28 * 56 / 46 px corner radii, 120 × 37 Dynamic Island.
29 */
30export function IPhoneMockup({
31	time = "9:41",
32	screenBackground,
33	statusBarTone = "auto",
34	hideStatusBar = false,
35	homeIndicator = true,
36	homeIndicatorTone = "auto",
37	className,
38	screenClassName,
39	children,
40}: IPhoneMockupProps) {
41	const resolvedTone =
42		statusBarTone === "auto"
43			? isDarkColor(screenBackground)
44				? "light"
45				: "dark"
46			: statusBarTone;
47 
48	const resolvedHomeTone =
49		homeIndicatorTone === "auto"
50			? isDarkColor(screenBackground)
51				? "light"
52				: "dark"
53			: homeIndicatorTone;
54 
55	const fg = resolvedTone === "light" ? "#ffffff" : "#000000";
56 
57	return (
58		<div
59			className={cn(
60				"relative inline-block rounded-[56px] bg-black p-[10px]",
61				"shadow-[0_50px_100px_-20px_rgba(0,0,0,0.35),0_30px_60px_-30px_rgba(0,0,0,0.4),inset_0_0_0_1px_rgba(255,255,255,0.04)]",
62				className,
63			)}
64			style={{ width: 390, height: 815 }}
65			aria-label="iPhone mockup"
66			role="img"
67		>
68			<div
69				aria-hidden="true"
70				className="pointer-events-none absolute inset-0 rounded-[56px]"
71				style={{
72					background:
73						"linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.04) 100%)",
74				}}
75			/>
76 
77			<SideButtons />
78 
79			<div
80				className={cn(
81					"relative flex flex-col overflow-hidden rounded-[46px]",
82					screenClassName,
83				)}
84				style={{
85					width: 370,
86					height: 795,
87					background: screenBackground ?? "#ffffff",
88				}}
89			>
90				{/* Dynamic Island */}
91				<div
92// … truncated