starter/src/components/organisms/widgets/TopBar/index.tsx

import * as React from 'react'
import styled from 'styled-components'
import * as T from '@tesseract-design/react-common'
import {UrlObject} from 'url';

const Base = styled('div')({
	position: 'fixed',
	top: 0,
	left: 0,
	width: '100%',
	height: 'var(--height-topbar, 4rem)',
	backgroundColor: 'var(--color-bg, white)',
	zIndex: 2,
	'@media (prefers-color-scheme: dark)': {
		backgroundColor: 'var(--color-bg, black)',
	},
	'~ *': {
		paddingTop: 'var(--height-topbar, 4rem)',
	},
	'~ main ~ *': {
		paddingTop: 0,
	},
	'@media (min-width: 1080px)': {
		'~ main ~ *': {
			paddingTop: 'var(--height-topbar, 4rem)',
		},
	},
})

const Container = styled('div')({
	padding: '0 1rem',
	boxSizing: 'border-box',
	margin: '0 auto',
	maxWidth: 'calc(var(--width-base, 360px) * 2)',
	width: '100%',
	height: '100%',
	display: 'flex',
	alignItems: 'center',
})

const WideContainer = styled(Container)({
	'@media (min-width: 1080px)': {
		maxWidth: 'calc(var(--width-base, 360px) * 3)',
	},
})

const BrandContainer = styled('div')({
	width: '6rem',
	'@media (min-width: 720px)': {
		width: '8rem',
	},
})

const SearchContainer = styled('form')({
	flex: 'auto',
	padding: '0 1rem',
	boxSizing: 'border-box',
	':first-child': {
		paddingLeft: 0,
	},
})

const UserContainer = styled('div')({
	textAlign: 'right',
	height: '100%',
	whiteSpace: 'nowrap',
	'@media (min-width: 720px)': {
		minWidth: '8rem',
	},
})

const MenuUserLinkContainer = styled('span')({
	'@media (min-width: 1080px)': {
		position: 'absolute',
		left: -999999,
	},
})

type Props = {
	query?: string,
	onSearch?: React.FormEventHandler,
	searchLabel?: string,
	searchName?: string,
	searchHint?: string,
	wide?: boolean,
	withMenu?: boolean,
	brand?: React.ReactNode,
	linkComponent?: React.ElementType,
	menuLink: UrlObject,
	userLink: UrlObject,
	menuLinkLabel?: string,
	userLinkLabel?: string,
}

const TopBar: React.FC<Props> = ({
	query,
	onSearch,
	searchLabel = 'Search',
	searchName = 'q',
	searchHint = 'e.g. keywords, names…',
	wide,
	withMenu,
	brand,
	linkComponent: LinkComponent = 'a',
	menuLink,
	menuLinkLabel = 'Menu',
	userLink,
	userLinkLabel = 'Guest',
}) => {
	const ContainerComponent = wide ? WideContainer : Container
	return (
		<Base>
			<ContainerComponent>
				{
					Boolean(brand)
					&& (
						<BrandContainer>
							{brand}
						</BrandContainer>
					)
				}
				<SearchContainer
					onSubmit={onSearch}
				>
					<T.TextInput
						name={searchName}
						label={searchLabel}
						hint={searchHint}
						defaultValue={query}
						border
						alternate
						indicator={
							<T.Icon
								name="search"
								label=""
							/>
						}
					/>
				</SearchContainer>
				<UserContainer>
					{
						withMenu
						&& (
							<MenuUserLinkContainer>
								<LinkComponent
									href={menuLink}
									style={{
										width: 'var(--height-topbar, 4rem)',
										height: '100%',
										display: 'inline-grid',
										placeContent: 'center',
									}}
									shallow
								>
									<T.Icon
										name="menu"
										label={menuLinkLabel}
									/>
								</LinkComponent>
							</MenuUserLinkContainer>
						)
					}
					<LinkComponent
						href={userLink}
						style={{
							width: 'var(--height-topbar, 4rem)',
							height: '100%',
							display: 'inline-grid',
							placeContent: 'center',
						}}
					>
						<T.Icon
							name="user"
							label={userLinkLabel}
						/>
					</LinkComponent>
				</UserContainer>
			</ContainerComponent>
		</Base>
	)
}

export default TopBar