Add ReviewList and Filtering

src/components/Banner.jsx

@@ -3,6 +3,10 @@ import Icon from '../Icon.svg';
 import Search from '../Search.svg';
 
 const Banner = () => {
+    // const navigate = useNavigate();
+    // const navigateToReviews = () => {
+    //     navigate('/reviews')
+    // }
     return (
         <div className='banner-div'>
             <div className="logo-search-div">

src/components/CafeList.css

@@ -0,0 +1,28 @@
+.cafe-list-container {
+    display: flex;
+    gap: 2rem;
+}
+
+.filter {
+    width: 250px;
+    padding: 1rem;
+    background-color: #f5f5f5;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.cafe-list {
+    display: block;
+    flex-grow: 1;
+}
+
+.cafe-card {
+    width: 100%;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #fff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+

src/components/CafeList.jsx

@@ -0,0 +1,78 @@
+import './CafeList.css';
+
+const reviews = [
+    {
+        id: 1,
+        author: 'John Doe',
+        rating: 4,
+        content: 'Currently busy.',
+        location: 'Starbucks',
+    },
+    {
+        id: 2,
+        author: 'Jane Smith',
+        rating: 5,
+        content: 'Somewhat busy, some seats remain.',
+        location: 'Colectivo',
+    },
+    {
+        id: 3,
+        author: 'Alice Johnson',
+        rating: 3,
+        content: 'Very empty, plenty of seats.',
+        location: "Phil's",
+    },
+    {
+        id: 4,
+        author: 'Bob Brown',
+        rating: 5,
+        content: 'Very quiet and great coffee!',
+        location: 'Coffee Lab',
+    },
+];
+
+const CafeList = () => {
+    return (
+        <div className="cafe-list-container">
+            {/* Filter section */}
+            <div className="filter">
+                <h4>Filter Options</h4>
+                {/* Example filter options */}
+                <label>
+                    Rating:
+                    <select>
+                        <option value="1">1 Star</option>
+                        <option value="2">2 Stars</option>
+                        <option value="3">3 Stars</option>
+                        <option value="4">4 Stars</option>
+                        <option value="5">5 Stars</option>
+                    </select>
+                </label>
+                <br />
+                <label>
+                    Location:
+                    <input type="text" placeholder="Search by location" />
+                </label>
+                {/* Add more filters here as needed */}
+            </div>
+
+            {/* Review cards */}
+            <div className="cafe-list">
+                {reviews.map((review) => (
+                    <div key={review.id} className="cafe-card">
+                        <h3>{review.author}</h3>
+                        <p>{review.location}</p>
+                        <div>
+                            {Array.from({ length: review.rating }).map((_, index) => (
+                                <span key={index}>&#9733;</span>
+                            ))}
+                        </div>
+                        <p>{review.content}</p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default CafeList;

src/pages/ReviewsPage.jsx

@@ -0,0 +1,13 @@
+import Banner from "../components/Banner";
+import CafeList from "../components/CafeList";
+
+const ReviewsPage = () => {
+    return (
+        <div>
+            <Banner/>
+            <CafeList/>
+        </div>
+    )
+}
+
+export default ReviewsPage;