Mina Choi
4f9789c08a
- 공급사 포털: 채팅 말풍선·남은시간 표기·헤더바·채팅 화면 정비 - landing: how-it-works 데모를 GIF 재생으로 되돌리고 히어로·디바이스 목업 조정, negotiation_annotated_3d 미디어 갱신
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="bg-white rounded-[36px] flex-1 overflow-hidden relative flex flex-col justify-center items-center">
|
|
<div className="absolute top-1 left-1/2 -translate-x-1/2 bg-black/70 h-0.5 w-3.5 rounded-full z-20" />
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { BrowserFrame, PhoneFrame }
|