@onehat/ui/src/Components/Toolbar/Toolbar.js

Base UI for OneHat apps

import {
	HStackNative,
	ScrollView,
} from '@project-components/Gluestack';
import clsx from 'clsx';
import {
	CURRENT_MODE,
	UI_MODE_NATIVE,
} from '../../Constants/UiModes.js';
import UiGlobals from '../../UiGlobals.js';

export default function Toolbar(props) {
	
	const styles = UiGlobals.styles;
	
	let className = clsx(
		'Toolbar',
		'overflow-auto',
		'items-center',
		'justify-start',
		'gap-2',
		'p-2',
		'border-b',
		'border-solid',
		'border-b-grey-400',
		styles.TOOLBAR_CLASSNAME,
	);
	if (CURRENT_MODE === UI_MODE_NATIVE) {
		className += ' min-w-[100%]';
	}
	if (props.className) {
		className += ' ' + props.className
	}
	let toolbar = <HStackNative
						className={className}
						style={props.style || {}}
					>
						{props.children}
					</HStackNative>;	

	if (CURRENT_MODE === UI_MODE_NATIVE) {
		toolbar = <ScrollView
						horizontal={true}
						className={clsx(
							'min-w-[100%]',
							'max-h-[50px]',
						)}
					>{toolbar}</ScrollView>;
	}

	return toolbar;
};