25 lines
636 B
TypeScript
25 lines
636 B
TypeScript
import Image from 'next/image'
|
|
import clsx from 'clsx'
|
|
|
|
export function PhoneFrame({
|
|
className,
|
|
children,
|
|
priority = false,
|
|
...props
|
|
}: React.ComponentPropsWithoutRef<'div'> & { priority?: boolean }) {
|
|
return (
|
|
<div className={clsx('relative aspect-[366/729]', className)} {...props}>
|
|
<Image
|
|
src="/images/phone-frame.svg"
|
|
alt=""
|
|
className="pointer-events-none absolute inset-0"
|
|
fill
|
|
priority={priority}
|
|
/>
|
|
<div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-hidden bg-gray-900">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|