UPDATE: Added more categories to database and updated categories page

frontend/src/components/Layout/ListItem.tsx

@@ -23,7 +23,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <div className="p-4">
       <div
-        className="min-w-[25vw] overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg 
+        className="min-w-[20vw] overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg 
 	   cursor-pointer hover:bg-pink-700 hover:scale-105 transition-all"
         onClick={onItemClick}
       >

frontend/src/components/Layout/ListRow.tsx

@@ -52,7 +52,7 @@ const ListRow: React.FC<ListRowProps> = ({
       </div>
 
       <div className="relative overflow-hidden flex items-center z-0">
-        {!wrap && items.length > 3 && (
+        {!wrap && items.length > 4 && (
           <>
             <ArrowLeftIcon
               onClick={slideLeft}

frontend/src/pages/AllCategoriesPage.tsx

@@ -1,21 +1,31 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ListRow from "../components/Layout/ListRow";
 import { useCategories } from "../context/ContentContext";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
 
 const AllCategoriesPage: React.FC = () => {
   const { categories, setCategories } = useCategories();
   const navigate = useNavigate();
+  const [categoryOffset, setCategoryOffset] = useState(0);
+  const [noCategories, setNoCategories] = useState(12);
+  const [hasMoreData, setHasMoreData] = useState(true);
 
   useEffect(() => {
     const fetchCategories = async () => {
       try {
-        const response = await fetch("/api/categories/popular/8/0");
+        const response = await fetch(`/api/categories/popular/${noCategories}/${categoryOffset}`);
         if (!response.ok) {
           throw new Error("Failed to fetch categories");
         }
         const data = await response.json();
+        // Adds to offset once data is returned
+        if (data.length > 0) {
+          setCategoryOffset(prev => prev + data.length);
+        } else {
+          setHasMoreData(false);
+        }
 
         // Transform the data to match CategoryItem interface
         const processedCategories = data.map((category: any) => ({
@@ -37,6 +47,11 @@ const AllCategoriesPage: React.FC = () => {
     fetchCategories();
   }, [setCategories]);
 
+  const logOnScroll = () => {
+    console.log("hi")
+  };
+  fetchContentOnScroll(logOnScroll,hasMoreData)
+
   if (!categories.length) {
     return (
       <div className="h-screen w-screen flex items-center justify-center text-white">

frontend/src/pages/HomePage.tsx

@@ -38,7 +38,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         description={
           variant === "personalised"
             ? "We think you might like these streams - Streamers recommended for you"
-            : "Streamers that are currently live"
+            : "Popular streamers that are currently live!"
         }
         items={streams}
         wrap={false}
@@ -62,7 +62,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         description={
           variant === "personalised"
             ? "Current streams from your followed categories"
-            : "Categories that have been 'popping off' lately"
+            : "Recently popular categories lately!"
         }
         items={categories}
         wrap={false}