feat: items can be added from the list page; add MUI Grid components for better layout

Author: Nika Kolesnikova

src/views/List.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { useEnsureListPath } from '../hooks/useEnsureListPath';
-import { List as UnorderedList } from '@mui/material';
+import { List as UnorderedList, Box, Grid } from '@mui/material';
 import { TextInputElement, AddItems, ListItem } from '../components';
 
 export function List({ data, listPath }) {
@@ -31,17 +31,31 @@ export function List({ data, listPath }) {
 			) : (
 				<>
 					<p>{listName}</p>
+					<Box sx={{ flexGrow: 1 }}>
+						<Grid
+							container
+							spacing={8}
+							columns={16}
+							justifyContent="space-between"
+						>
+							<Grid item size={{ xs: 2, sm: 4, md: 4 }}>
+								<AddItems items={data} />
+							</Grid>
+							<Grid item size={{ xs: 2, sm: 4, md: 4 }}>
+								<form onSubmit={(event) => event.preventDefault()}>
+									<TextInputElement
+										id="search-item"
+										type="search"
+										placeholder="Search Item..."
+										required={true}
+										onChange={handleTextChange}
+										label="Search Item:"
+									/>
+								</form>
+							</Grid>
+						</Grid>
+					</Box>
 
-					<form onSubmit={(event) => event.preventDefault()}>
-						<TextInputElement
-							id="search-item"
-							type="search"
-							placeholder="Search Item..."
-							required={true}
-							onChange={handleTextChange}
-							label="Search Item:"
-						/>
-					</form>
 					<UnorderedList>
 						{filteredItems.map((item) => {
 							return <ListItem key={item.id} item={item} listPath={listPath} />;