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

import * as React from 'react';
import {LayoutArgs, Span, widgets} from '@tesseract-design/viewfinder-base';

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

export const TopBar = React.forwardRef<HTMLDivElement, TopBarProps>(({
	span = Span.NORMAL,
	brand,
	menuLink,
	userLink,
	children,
	...etcProps
}, ref) => {
	const args: LayoutArgs = {
		span,
		mainSidebarOpen: false,
		auxiliaryItemsShown: false,
	};

	return (
		<div className={widgets.TopBar.Base()}>
			<div
				{...etcProps}
				ref={ref}
			>
				<div className={widgets.TopBar.Container(args)}>
					{
						Boolean(brand as unknown)
						&& (
							<div>
								{brand}
							</div>
						)
					}
					<div className={widgets.TopBar.CenterContainer()}>
						{children}
					</div>
					<div className={widgets.TopBar.ActionContainer()}>
						{
							Boolean(menuLink as unknown)
							&& (
								<div className={widgets.TopBar.MenuLinkContainer()}>
									{menuLink}
								</div>
							)
						}
						{
							Boolean(userLink as unknown)
							&& (
								<div className={widgets.TopBar.LinkContainer()}>
									{userLink}
								</div>
							)
						}
					</div>
				</div>
			</div>
		</div>
	)
})

TopBar.displayName = 'TopBar';