26 lines
966 B
TypeScript
26 lines
966 B
TypeScript
import { type ReactNode } from 'react'
|
|
import { cn } from '@/lib'
|
|
|
|
// safe-t: 노치 기기에서 헤더가 상태바 밑으로 파고들지 않도록 안전영역만큼 키운다.
|
|
// box-content 금지 — w-full + px-* 와 겹치면 폭이 "부모100% + 좌우패딩"이 되어 오른쪽이 잘린다.
|
|
// 대신 border-box(기본) 유지하고 min-h 로 56px + 안전영역을 확보한다.
|
|
const HEADER_BASE =
|
|
'flex w-full min-h-[calc(56px+env(safe-area-inset-top))] safe-t items-center bg-white text-foreground border-b border-border'
|
|
|
|
const HEADER_ALIGN = {
|
|
left: 'justify-start',
|
|
center: 'justify-center',
|
|
} as const
|
|
|
|
export interface MainHeaderBarProps {
|
|
align?: keyof typeof HEADER_ALIGN
|
|
className?: string
|
|
children: ReactNode
|
|
}
|
|
|
|
export function MainHeaderBar({ align = 'left', className, children }: MainHeaderBarProps) {
|
|
return <div className={cn(HEADER_BASE, HEADER_ALIGN[align], className)}>{children}</div>
|
|
}
|
|
|
|
export default MainHeaderBar
|