65 lines
3.6 KiB
TypeScript
65 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { Wifi, Battery, Signal } from 'lucide-react';
|
|
|
|
interface PhoneFrameProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
isDark?: boolean;
|
|
}
|
|
|
|
export const PhoneFrame: React.FC<PhoneFrameProps> = ({ children, className = '', isDark = true }) => {
|
|
return (
|
|
<div className={`relative ${className} select-none`}>
|
|
{/* Titanium Frame Chassis */}
|
|
<div className="relative bg-[#2a2a2a] rounded-[3.5rem] p-[2px] shadow-[0_0_0_4px_#1a1a1a,0_20px_50px_-12px_rgba(0,0,0,0.8)] h-full ring-1 ring-white/10">
|
|
|
|
{/* Inner Bezel (Black Border) */}
|
|
<div className="absolute inset-[2px] rounded-[3.3rem] border-[6px] border-black pointer-events-none z-20" />
|
|
|
|
{/* Screen Container */}
|
|
<div className={`bg-black rounded-[3.2rem] overflow-hidden relative h-full flex flex-col w-full mask-image`}>
|
|
|
|
{/* iOS Status Bar */}
|
|
<div className="h-14 w-full absolute top-0 left-0 z-50 px-8 pt-4 flex justify-between items-start text-white pointer-events-none mix-blend-difference">
|
|
<span className="text-[15px] font-semibold tracking-normal pl-1">9:41</span>
|
|
|
|
<div className="flex gap-1.5 items-center pr-1 text-white">
|
|
<Signal size={15} strokeWidth={2.5} className="fill-current" />
|
|
<Wifi size={15} strokeWidth={2.5} />
|
|
<div className="relative ml-1">
|
|
<Battery size={22} strokeWidth={2} className="text-white/90" />
|
|
{/* Battery Fill */}
|
|
<div className="absolute top-1/2 left-[2.5px] -translate-y-1/2 w-[10px] h-[7px] bg-white rounded-[1px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dynamic Island */}
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-[11px] w-[120px] h-[36px] bg-black rounded-[20px] z-50 flex items-center justify-center pointer-events-none">
|
|
<div className="flex items-center justify-end w-full h-full relative px-4">
|
|
{/* Selfie Camera Lens */}
|
|
<div className="w-3 h-3 rounded-full bg-[#101010] ring-1 ring-white/5 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-tr from-blue-900/30 to-transparent" />
|
|
<div className="absolute top-1 right-1 w-1 h-1 bg-white/10 rounded-full blur-[1px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Screen Content */}
|
|
<div className="relative z-10 h-full w-full flex flex-col bg-black text-white font-sans antialiased">
|
|
{children}
|
|
</div>
|
|
|
|
{/* Home Indicator */}
|
|
<div className="absolute bottom-2 left-1/2 -translate-x-1/2 w-36 h-1.5 bg-white rounded-full z-50 pointer-events-none mix-blend-exclusion" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hardware Buttons */}
|
|
<div className="absolute top-28 -left-[3px] w-[3px] h-8 bg-[#1a1a1a] rounded-l-sm shadow-[-1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Action */}
|
|
<div className="absolute top-44 -left-[3px] w-[3px] h-16 bg-[#1a1a1a] rounded-l-sm shadow-[-1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Vol Up */}
|
|
<div className="absolute top-64 -left-[3px] w-[3px] h-16 bg-[#1a1a1a] rounded-l-sm shadow-[-1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Vol Down */}
|
|
<div className="absolute top-52 -right-[3px] w-[3px] h-24 bg-[#1a1a1a] rounded-r-sm shadow-[1px_0_2px_rgba(255,255,255,0.1)]" /> {/* Power */}
|
|
</div>
|
|
);
|
|
}; |