improve catalogue accessibility, error messages and pagination

src/App.css

@@ -270,6 +270,19 @@
   font-size: 0.85rem;
 }
 
+/* empty search results */
+.empty-state {
+  padding: 40px 24px;
+  text-align: center;
+  color: #310E10;
+  background: #F4E3B2;
+  border-radius: 12px;
+}
+
+.empty-state h2 {
+  margin-top: 0;
+}
+
 /* Smaller screens */
 @media (max-width: 1050px) {
   .catalogue-layout {
@@ -307,4 +320,5 @@
   .results-heading span {
     display: none;
   }
+
 }

src/mock/albums.json

@@ -70,5 +70,41 @@
       { "title": "One More Time", "duration": "5:20" },
       { "title": "Digital Love", "duration": "4:58" }
     ]
+  },
+  {
+    "id": "album-7",
+    "title": "AM",
+    "artist": "Arctic Monkeys",
+    "releaseYear": 2013,
+    "genre": ["Rock"],
+    "coverUrl": "",
+    "tracks": [
+      { "title": "Do I Wanna Know?", "duration": "4:32" },
+      { "title": "R U Mine?", "duration": "3:21" }
+    ]
+  },
+  {
+    "id": "album-8",
+    "title": "2",
+    "artist": "Mac DeMarco",
+    "releaseYear": 2012,
+    "genre": ["Pop"],
+    "coverUrl": "",
+    "tracks": [
+      { "title": "Dreaming", "duration": "2:27" },
+      { "title": "Freaking Out the Neighborhood", "duration": "2:53" }
+    ]
+  },
+  {
+    "id": "album-9",
+    "title": "Doggystyle",
+    "artist": "Snoop Dogg",
+    "releaseYear": 1993,
+    "genre": ["HipHop"],
+    "coverUrl": "",
+    "tracks": [
+      { "title": "Bathtub", "duration": "1:50" },
+      { "title": "G Funk Intro", "duration": "2:24" }
+    ]
   }
 ]

src/pages/CataloguePage.tsx

@@ -1,5 +1,5 @@
 
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Link } from 'react-router-dom'
 import '../App.css'
 import albumData from '../mock/albums.json'
@@ -17,6 +17,7 @@ function CataloguePage() {
   const [decade, setDecade] = useState('All decades')
   const [rating, setRating] = useState<number | null>(null)
   const [filtersVisible, setFiltersVisible] = useState(true)
+  const [currentPage, setCurrentPage] = useState(1)
 
   const genres = [
     'All genres',
@@ -76,11 +77,18 @@ function CataloguePage() {
     })
   }, [albums, search, genre, decade, rating])
 
+  const pageSize = filtersVisible ? 6 : 8
+  const totalPages = Math.ceil(filteredAlbums.length / pageSize)
+
   const visibleAlbums = filteredAlbums.slice(
-    0,
-    filtersVisible ? 6 : 8,
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
   )
 
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [search, genre, decade, filtersVisible])
+
   function clearFilters() {
     setSearch('')
     setGenre('All genres')
@@ -197,14 +205,34 @@ function CataloguePage() {
               <span>CURATED FOR YOU</span>
             </div>
 
-            <AlbumList albums={visibleAlbums} />
+            {filteredAlbums.length === 0 ? (
+              <div className="empty-state" role = "status">
+                <h2>No albums found</h2>
+                <p>Try another search or adjust your filters.</p>
+
+              </div>
+            ) : (
+              <AlbumList albums={visibleAlbums}/>
+            )}
 
             <div className="pagination">
-              <button type="button" disabled>
+              <button type="button"
+              onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
+              disabled={currentPage <= 1}
+              >
                 ← Previous
               </button>
-              <span>Page 1</span>
-              <button type="button" disabled>
+
+              <span>
+                Page {totalPages === 0 ? 0 : currentPage} of {totalPages}
+              </span>
+
+              <button type="button"
+              onClick={() =>
+                setCurrentPage((page) => Math.min(totalPages, page + 1))
+              }
+              disabled={currentPage >= totalPages}
+              >
                 Next →
               </button>
             </div>