Ar add item updates issue 25

package.json

@@ -9,7 +9,8 @@
 	"dependencies": {
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
-		"@mui/material": "^6.0.2",
+		"@mui/icons-material": "^6.1.2",
+		"@mui/material": "^6.1.2",
 		"@the-collab-lab/shopping-list-utils": "^2.2.0",
 		"firebase": "^10.12.5",
 		"react": "^18.3.1",

src/App.jsx

@@ -1,6 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
-import { Home, Layout, List, ManageList } from './views';
+import { Home, Layout, List, ManageList, ShareList } from './views';
 
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 
@@ -68,6 +68,10 @@ export function App() {
 						path="/manage-list"
 						element={<ManageList userId={userId} list={data} />}
 					/>
+					<Route
+						path="/share-list"
+						element={<ShareList userId={userId} list={data} />}
+					/>
 				</Route>
 			</Routes>
 		</Router>

src/components/ShareListComponent.jsx

@@ -0,0 +1,20 @@
+import './SingleList.css';
+import { useNavigate } from 'react-router-dom';
+import ShareIcon from '@mui/icons-material/Share';
+
+export function ShareListComponent({ path, setListPath }) {
+	const navigate = useNavigate();
+
+	function handleClick() {
+		setListPath(path);
+		navigate('/share-list');
+	}
+
+	return (
+		<>
+			<button>
+				<ShareIcon onClick={handleClick} />
+			</button>
+		</>
+	);
+}

src/components/index.js

@@ -1,2 +1,3 @@
 export * from './ListItem';
 export * from './SingleList';
+export * from './ShareListComponent';

src/views/Home.jsx

@@ -1,9 +1,11 @@
 import './Home.css';
-import { SingleList } from '../components';
+import { SingleList, ShareListComponent } from '../components';
 import { createList, useAuth, deleteList } from '../api';
 import { Fragment, useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useVoiceToText } from '../utils';
+import DeleteIcon from '@mui/icons-material/Delete';
+import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice';
 
 export function Home({ data, setListPath, setAllLists }) {
 	const [listName, setListName] = useState('');
@@ -57,9 +59,6 @@ export function Home({ data, setListPath, setAllLists }) {
 
 	return (
 		<div className="Home">
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
 			<ul className="font-archivo">
 				{data &&
 					data.map((list) => {
@@ -71,23 +70,32 @@ export function Home({ data, setListPath, setAllLists }) {
 									setListPath={setListPath}
 									path={list.path}
 								/>
-								<button onClick={() => handleDelete(list)}>Delete</button>
+								<button onClick={() => handleDelete(list)}>
+									<DeleteIcon />
+								</button>
+
+								<ShareListComponent
+									name={list.name}
+									setListPath={setListPath}
+									path={list.path}
+								/>
+
 								<br></br>
 								<br></br>
 							</Fragment>
 						);
 					})}
 			</ul>
 			<form action="" onSubmit={handleSubmit}>
-				<label htmlFor="listName">Enter List Name:</label>
+				<label htmlFor="listName">Add a New List:</label>
 				<input
 					type="text"
 					id="listName"
 					value={listName}
 					onChange={(e) => setListName(e.target.value)}
 				/>
 				<button type="button" onClick={startListening}>
-					{isListening ? 'Listening...' : 'Start Voice Input'}
+					{isListening ? 'Listening...' : <KeyboardVoiceIcon />}
 				</button>
 				<button>Submit</button>
 				<p>{error}</p>