viewfinder/packages/react/src/widgets/TopBar/index.tsx

import * as React from 'react';
import clsx from 'clsx';
import { SpanValues as Span } from '@tesseract-design/viewfinder-base';

export interface TopBarProps extends Omit<React.HTMLProps<HTMLDivElement>, 'span'> {
	span?: Span,
	brand?: React.ReactNode,
	menuLink?: React.ReactNode,
	userLink?: React.ReactNode,
}

export const TopBar = React.forwardRef<HTMLDivElement, TopBarProps>(({
	span = 'normal',
	brand,
	menuLink,
	userLink,
	children,
	...etcProps
}, ref) => {
	return (
		<div className={clsx(
			'fixed top-0 left-0 w-full z-[3] topbar',
		)}>
			<div
				{...etcProps}
				ref={ref}
				className="w-full h-full bg-bg"
			>
				<div className={clsx(
					'px-8 box-border mx-auto w-full h-full flex items-center relative z-[1]',
					span === 'narrow' && 'max-w-screen-2xs',
					span === 'normal' && 'max-w-screen-xs',
					span === 'wide' && 'max-w-screen-md',
				)}>
					{
						Boolean(brand as unknown)
						&& (
							<div>
								{brand}
							</div>
						)
					}
					<div className="flex-auto px-8 box-border first:pl-0">
						{children}
					</div>
					<div className="flex items-center justify-end h-full whitespace-nowrap sm:min-w-32">
						{
							Boolean(menuLink as unknown)
							&& (
								<div
									data-viewfinder="menu"
									className="w-topbar h-full"
								>
									{menuLink}
								</div>
							)
						}
						{
							Boolean(userLink as unknown)
							&& (
								<div
									data-viewfinder="user"
									className="w-topbar h-full"
								>
									{userLink}
								</div>
							)
						}
					</div>
				</div>
			</div>
		</div>
	)
})

TopBar.displayName = 'TopBar';