Reuse components

packages/ui/src/components/atoms/Spacer.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
 
-export function Spacer() {
-	return <div style={{ flexGrow: 1 }} />;
+interface ISpacerProps {
+	width?: number | string;
+	height?: number | string;
+}
+
+export function Spacer(props: ISpacerProps) {
+	return <div style={{ flexGrow: 1, minWidth: props.width ?? 0, minHeight: props.height ?? 0 }} />;
 }

packages/ui/src/components/organisms/LibraryAppBar.tsx

@@ -1,9 +1,9 @@
-import { AppBar, Box, Button, ButtonGroup, Toolbar } from "@mui/material";
+import { AppBar, Button, ButtonGroup, Toolbar } from "@mui/material";
 import { Signal, useComputed, useSignal } from "@preact/signals-react";
 import React from "react";
 import { useHotkey } from '../../hooks';
 import { useTranslation } from '../../hooks/useTranslation';
-import { TextInput } from '../atoms';
+import { Spacer, TextInput } from '../atoms';
 import { Display } from "../pages/LibraryManager";
 
 // Icons
@@ -55,7 +55,7 @@ export function LibraryAppBar(props: { query: Signal<string>, display: Signal<Di
 					inputRef={searchFieldRef}
 					variant={'standard'}
 				/>
-				<Box sx={{ flexGrow: 1, minWidth: 75 }} />
+				<Spacer width={75} />
 				{displayButtons}
 			</Toolbar>
 		</AppBar>

packages/ui/src/services/AppbarButtonService.tsx

@@ -1,5 +1,5 @@
-import { Box } from '@mui/material';
 import { computed, Signal } from '@preact/signals-react';
+import { Spacer } from '../components/atoms';
 import React from 'react';
 
 export interface IAppbarButtonOptions {
@@ -22,7 +22,7 @@ export class AppbarButtonService {
 
 	public appbarButtons = computed(() => (<>
 		{this.buttons.value.filter(b => b.position === 'start').map(b => b.component)}
-		<Box sx={{ flexGrow: 1 }} />
+		<Spacer />
 		{this.buttons.value.filter(b => b.position === 'end').map(b => b.component)}
 	</>));