Make text dynamic and adjust location of text

neuefische · Aug 21, 2024 · d14b5f9 · d14b5f9
1 parent 59ba72a
commit d14b5f9
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/frontend/src/pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.tsx b/frontend/src/pages/BookGalleryPage/bookGalleryPage/BookGalleryPage.tsx
@@ -65,11 +65,17 @@ export default function BookGalleryPage({filteredBooks, setSearchInput}: BookGal
                 }
             </div>
                 <StatusFilter statusFilter={statusFilter} setStatusFilter={setStatusFilter}/>
-                <p className={"number-of-books"}>{filteredBooksByGenreAndStatus.length} books</p>
+                <p className={"number-of-books"}>
+                    {
+                        filteredBooksByGenreAndStatus.length == 1
+                            ? filteredBooksByGenreAndStatus.length + " book"
+                            : filteredBooksByGenreAndStatus.length + " books"
+                    }
+                </p>
             {
                 filteredBooksByGenreAndStatus.length > 0
                     ? <BookGallery data={filteredBooksByGenreAndStatus} />
-                    : <p>No Books found</p>
+                    : <p style={{textAlign: "center", marginTop: "50px"}}>No Books found</p>
             }
             <GoToTopButton/>
         </div>