36 lines
1.9 KiB
TypeScript
36 lines
1.9 KiB
TypeScript
import type * as React from "react"
|
|
|
|
/** 데스크톱 브라우저 목업 프레임 — 신호등 버튼 + 주소창 + 16:10 워크스페이스. */
|
|
function BrowserFrame({ url, children }: { url: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="bg-white rounded-2xl border border-line-strong shadow-[0_12px_40px_rgba(0,0,0,0.06)] overflow-hidden w-full max-w-2xl">
|
|
<div className="bg-fill px-4 py-3.5 flex items-center justify-between border-b border-line-strong">
|
|
<div className="flex items-center gap-2">
|
|
<span className="w-3 h-3 rounded-full bg-[#FF5F56] inline-block" />
|
|
<span className="w-3 h-3 rounded-full bg-[#FFBD2E] inline-block" />
|
|
<span className="w-3 h-3 rounded-full bg-[#27C93F] inline-block" />
|
|
<span className="text-[11px] text-ink-muted font-mono ml-3 font-semibold bg-white px-3 py-1 rounded-md border border-line-strong truncate max-w-[180px] sm:max-w-none">
|
|
{url}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="relative bg-surface aspect-[16/10] flex flex-col justify-center items-center overflow-hidden">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/** 모바일 폰 목업 프레임 — 노치 포함 9:18 스크린. */
|
|
function PhoneFrame({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="relative bg-black rounded-[48px] p-3 shadow-[0_20px_50px_rgba(0,0,0,0.15)] border-4 border-line-strong w-full max-w-[290px] aspect-[9/18] overflow-hidden flex flex-col">
|
|
<div className="absolute top-4 left-1/2 -translate-x-1/2 bg-black h-5 w-28 rounded-full z-20 flex items-center justify-around px-4">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-[#1F2022]" />
|
|
<span className="w-10 h-1 bg-[#1F2022] rounded-full" />
|
|
</div>
|
|
<div className="bg-white rounded-[36px] flex-1 overflow-hidden relative flex flex-col justify-center items-center">{children}</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { BrowserFrame, PhoneFrame }
|