added styles using tailwindCss, delete not working

src/App.jsx

@@ -52,6 +52,7 @@ export function App() {
 							<Home
 								data={lists}
 								setListPath={setListPath}
+								listPath={listPath}
 								userId={userId}
 								userEmail={userEmail}
 							/>

src/api/firebase.js

@@ -8,6 +8,7 @@ import {
 	updateDoc,
 	addDoc,
 	increment,
+	arrayRemove,
 	deleteDoc,
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
@@ -224,6 +225,18 @@ export async function deleteItem(listPath, itemId) {
 	const docRef = doc(db, listPath, 'items', itemId);
 	await deleteDoc(docRef);
 }
+// delete collection path
+export async function deleteList(listPath, email) {
+	const docRef = doc(db, listPath);
+
+	const userDocRef = doc(db, 'users', email);
+
+	await deleteDoc(docRef);
+
+	await updateDoc(userDocRef, {
+		sharedLists: arrayRemove(docRef),
+	});
+}
 
 export async function comparePurchaseUrgency(dataset) {
 	dataset.sort((a, b) => {

src/components/SingleList.css

@@ -8,3 +8,7 @@
 .SingleList-label {
 	margin-left: 0.2em;
 }
+.selected {
+	background-color: #000000;
+	color: #e69500;
+}

src/components/SingleList.jsx

@@ -1,13 +1,31 @@
+import React from 'react';
 import './SingleList.css';
+import { MdOutlineDeleteForever } from 'react-icons/md';
+import { deleteList } from '../api';
 
-export function SingleList({ name, path, setListPath }) {
-	function handleClick() {
+export function SingleList({ name, path, setListPath, listPath, email }) {
+	// Function to handle selecting a list
+	const handleClick = () => {
 		setListPath(path);
-	}
+	};
+
+	// Function to handle deleting a list
+	const handleDelete = async () => {
+		const listPath = '/' + path;
+		await deleteList(listPath, email);
+		localStorage.setItem('tcl-shopping-list-path', '');
+		window.location.reload();
+	};
 
 	return (
-		<li className="SingleList">
-			<button onClick={handleClick}>{name}</button>
-		</li>
+		<div
+			className={`flex items-center justify-between ${path === listPath ? 'selected' : ''}`}
+		>
+			<li className="SingleList">
+				<button onClick={handleClick}>{name}</button>
+			</li>
+			<hr />
+			<MdOutlineDeleteForever className="text-red-700" onClick={handleDelete} />
+		</div>
 	);
 }

src/views/Home.css

@@ -0,0 +1,78 @@
+.home {
+	background: rgba(255, 255, 255, 0.24);
+	border-radius: 16px;
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(4.7px);
+	-webkit-backdrop-filter: blur(4.7px);
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	@apply rounded-2xl shadow-2xl px-4 md:px-24 text-black mt-8;
+}
+#list {
+	@apply mt-8 flex flex-col justify-center items-center;
+}
+.input {
+	@apply border border-blue-700 text-black bg-white p-3 rounded-xl;
+	width: 70%;
+}
+.btn {
+	background-color: #113767;
+	@apply text-white p-3 rounded-xl shadow-md mb-8;
+}
+:hover .btn {
+	background-color: #38598b;
+}
+.exit-btn {
+	background-color: yellow;
+	color: black;
+	@apply p-3 rounded-xl shadow-md font-bold;
+}
+.hr-lines {
+	position: relative;
+	max-width: 500px;
+	margin: 20px auto;
+	text-align: center;
+}
+
+.hr-lines:before {
+	content: ' ';
+	height: 2px;
+	width: 200px;
+	background: red;
+	display: block;
+	position: absolute;
+	top: 50%;
+	left: 0;
+}
+
+.hr-lines:after {
+	content: ' ';
+	height: 2px;
+	width: 200px;
+	background: red;
+	display: block;
+	position: absolute;
+	top: 50%;
+	right: 0;
+}
+/* ..........................small screen................ */
+@media only screen and (max-width: 600px) {
+	.hr-lines {
+		font-size: 12px;
+	}
+
+	.hr-lines:before {
+		width: 100px;
+	}
+
+	.hr-lines:after {
+		width: 100px;
+	}
+	.btn,
+	.btn1,
+	.singleList {
+		font-size: 14px !important;
+	}
+	.input {
+		width: 100%;
+	}
+}

src/views/Home.jsx

@@ -1,30 +1,25 @@
+import React, { useState } from 'react';
 import { SingleList } from '../components/SingleList';
 import './Home.css';
 import { createList } from '../api/firebase';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
-export function Home({ data, setListPath, userId, userEmail }) {
+export function Home({ data, listPath, setListPath, userId, userEmail }) {
 	const [name, setName] = useState('');
 	const navigate = useNavigate();
 
 	const handleSubmit = async (event) => {
-		event.preventDefault(); // Prevent the default form submission behavior.
+		event.preventDefault();
 
 		try {
 			const newList = await createList(userId, userEmail, name);
-			setListPath(newList); // creates a new list and automatically creates the userId
-			// that tracks the purchased item and also saves it to local storage
-
-			setName(''); //refreshes the form after submission place takes it back to the default state
-
-			alert('The item has been added.'); //alert message
-
-			navigate('/list'); // navigate to list page
+			setListPath(newList);
+			setName('');
+			alert('The item has been added.');
+			navigate('/list');
 		} catch (err) {
 			console.error(err);
-
-			alert('item not created'); //alert message if there is an error with creating the item
+			alert('Item not created');
 		}
 	};
 
@@ -33,35 +28,45 @@ export function Home({ data, setListPath, userId, userEmail }) {
 	};
 
 	return (
-		<div className="Home">
-			<p>
-				Hello from the home (<code>/</code>) page!
-			</p>
-
+		<div className="home">
 			<form id="list" onSubmit={handleSubmit}>
-				<label htmlFor="listName">Name of shopping list: </label>
+				<label htmlFor="listName" className="pt-8 font-bold text-center">
+					Kindly generate a shopping List
+				</label>
 				<br />
 				<input
 					type="text"
 					id="listName"
 					value={name}
 					onChange={handleChange}
+					className="input"
+					placeholder="Type Here..."
 					required
 				/>
 				<br />
-				<button type="submit">Create list</button>
+				<div className="btn">
+					<button type="submit">Register List</button>
+				</div>
 			</form>
-
 			<ul>
 				{data?.map((item) => (
 					<SingleList
 						key={item.path}
 						name={item.name}
+						email={userEmail}
 						path={item.path}
 						setListPath={setListPath}
+						listPath={listPath} // Pass listPath to SingleList
 					/>
 				))}
 			</ul>
+			<h2 className="hr-lines">Tried🥱?</h2>
+
+			<div className="flex justify-center flex-center m-6 exit-btn">
+				<Link to="/manage-list">
+					<button className="btn1"> Create a List Right Away!</button>
+				</Link>
+			</div>
 		</div>
 	);
 }

src/views/Layout.css

@@ -11,6 +11,10 @@
 	display: flex;
 	flex-direction: column;
 	height: 100dvh;
+	background-image: url('/img/Home-cover2.jpg') !important;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
 }
 
 .Layout > * {

src/views/Layout.jsx

@@ -20,7 +20,7 @@ export function Layout() {
 		<>
 			<div className="Layout">
 				<header className="Layout-header">
-					<h1>Smart shopping list</h1>
+					<h1>Welcome to a Smart shopping list</h1>
 					{!user ? (
 						<div>
 							<SignInButton />