From 58524eb9a2db81e8057e7c877a1da162ca1869d1 Mon Sep 17 00:00:00 2001
From: JustIceO7 <oscarcao777@gmail.com>
Date: Wed, 12 Feb 2025 22:25:54 +0000
Subject: [PATCH] UPDATE: Got started with categories page

---
 .../category_banners/category_banners.json    |  5 ++
 frontend/src/components/Auth/RegisterForm.tsx |  3 --
 frontend/src/pages/CategoriesPage.tsx         | 46 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 frontend/public/images/category_banners/category_banners.json

diff --git a/frontend/public/images/category_banners/category_banners.json b/frontend/public/images/category_banners/category_banners.json
new file mode 100644
index 0000000..cc72d6a
--- /dev/null
+++ b/frontend/public/images/category_banners/category_banners.json
@@ -0,0 +1,5 @@
+{
+    "1": "https://example.com/category/101",
+    "2": "https://example.com/category/102",
+    "3": "https://example.com/category/103"
+  }
\ No newline at end of file
diff --git a/frontend/src/components/Auth/RegisterForm.tsx b/frontend/src/components/Auth/RegisterForm.tsx
index 9d39d70..c907ce9 100644
--- a/frontend/src/components/Auth/RegisterForm.tsx
+++ b/frontend/src/components/Auth/RegisterForm.tsx
@@ -182,9 +182,6 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
               <Button type="submit" >Register</Button>
             </form>
           </div>
-          <div className="flex flex-col flex-items justify-evenly items-center w-full h-[5em]">
-                  <GoogleLogin />
-                </div>
         </div>
         
       </div>
diff --git a/frontend/src/pages/CategoriesPage.tsx b/frontend/src/pages/CategoriesPage.tsx
index b212061..8ca6ba0 100644
--- a/frontend/src/pages/CategoriesPage.tsx
+++ b/frontend/src/pages/CategoriesPage.tsx
@@ -1,8 +1,50 @@
-import React from 'react';
+import React, { useState, useEffect } from "react";
+import Navbar from "../components/Layout/Navbar";
+import { useNavigate } from "react-router-dom";
 
 const CategoriesPage: React.FC = () => {
+  const [noCategories, setNoCategories] = useState<number>(0);
+  const [moreCategories, setMoreCategories] = useState<number>(12);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const response = await fetch(`api/categories/popular/${moreCategories}`)
+        if (!response.ok) {
+          throw new Error("Failed to fetch categories");
+        }
+        const data = await response.json();
+        console.log(data);
+      } catch (error) {
+        console.error("Error fetching categories:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchCategories();
+  }, [noCategories]);
+
+  if (isLoading) {
+    return (
+      <div className="h-screen w-screen flex items-center justify-center text-white">
+        Loading...
+      </div>
+    );
+  }
+
+  const handleCategoryClick = (category_name: string) => {
+    navigate(`/category${category_name}`);
+  };
+
   return (
-    <div className="categories-page">
+    <div
+      className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
+      style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
+    >
+      <Navbar />
       <h1>Categories Page</h1>
     </div>
   );