added styles using tailwindCss, delete not working

src/api/firebase.js

@@ -224,6 +224,16 @@ export async function deleteItem(listPath, itemId) {
 	const docRef = doc(db, listPath, 'items', itemId);
 	await deleteDoc(docRef);
 }
+// delete collection path
+// export async function deleteCollectionPath(db, listName, collectionId) {
+// 	const docRef = doc(db, listName, collectionId)
+// 	try {
+// 		await deleteDoc(docRef);
+// 		console.log(docRef)
+// 	} catch (err) {
+// 		console.error(err);
+// 	}
+// }
 
 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,29 @@
 import './SingleList.css';
+import { MdOutlineDeleteForever } from 'react-icons/md';
 
-export function SingleList({ name, path, setListPath }) {
+export function SingleList({
+	name,
+	path,
+	setListPath,
+	deleteCollectionPath,
+	selected,
+}) {
 	function handleClick() {
 		setListPath(path);
 	}
+	// function handleDelete() {
+	// 	deleteCollectionPath(path);
+	// }
 
 	return (
-		<li className="SingleList">
-			<button onClick={handleClick}>{name}</button>
-		</li>
+		<div
+			className={`flex items-center justify-between ${selected ? 'selected' : ''}`}
+		>
+			<li className="SingleList">
+				<button onClick={handleClick}>{name}</button>
+			</li>
+			<hr />
+			<MdOutlineDeleteForever className="text-red-700" />
+		</div>
 	);
 }

src/views/Home.css

@@ -0,0 +1,23 @@
+.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;
+}

src/views/Home.jsx

@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom';
 
 export function Home({ data, setListPath, userId, userEmail }) {
 	const [name, setName] = useState('');
+	const [selectedList, setSelectedList] = useState(null); // State to track the selected list
 	const navigate = useNavigate();
 
 	const handleSubmit = async (event) => {
@@ -31,34 +32,42 @@ export function Home({ data, setListPath, userId, userEmail }) {
 	const handleChange = (e) => {
 		setName(e.target.value);
 	};
+	// to create a highlighted list
+	const handleListClick = (path) => {
+		setListPath(path);
+		setSelectedList(path); // Update selected list
+	};
 
 	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">
+					Kindly generate a shopping Collection
+				</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 Collection List </button>
+				</div>
 			</form>
-
 			<ul>
 				{data?.map((item) => (
 					<SingleList
 						key={item.path}
 						name={item.name}
 						path={item.path}
-						setListPath={setListPath}
+						// setListPath={setListPath}
+						setListPath={handleListClick}
+						selected={selectedList === item.path} // Pass whether the list is selected
 					/>
 				))}
 			</ul>

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 />