34 lines
1,000 B
TypeScript
34 lines
1,000 B
TypeScript
|
import classNames from 'classnames'
|
||
|
|
import { HEADER_HEIGHT_CLASS } from '@/constants/theme.constant'
|
||
|
|
import type { ReactNode } from 'react'
|
||
|
|
import type { CommonProps } from '@/@types/common'
|
||
|
|
|
||
|
|
interface HeaderProps extends CommonProps {
|
||
|
|
headerStart?: ReactNode
|
||
|
|
headerEnd?: ReactNode
|
||
|
|
headerMiddle?: ReactNode
|
||
|
|
container?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const Header = (props: HeaderProps) => {
|
||
|
|
const { headerStart, headerEnd, headerMiddle, className, container } = props
|
||
|
|
|
||
|
|
return (
|
||
|
|
<header className={classNames('header', className)}>
|
||
|
|
<div
|
||
|
|
className={classNames(
|
||
|
|
'header-wrapper',
|
||
|
|
HEADER_HEIGHT_CLASS,
|
||
|
|
container && 'container mx-auto',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<div className="header-action header-action-start">{headerStart}</div>
|
||
|
|
{headerMiddle && <div className="header-action header-action-middle">{headerMiddle}</div>}
|
||
|
|
<div className="header-action header-action-end">{headerEnd}</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Header
|