From 52dddca2532d3742568c3de35ec7690ef2279e38 Mon Sep 17 00:00:00 2001
From: Tiago Brito <69848652+britotiago03@users.noreply.github.com>
Date: Fri, 10 May 2024 05:12:54 +0200
Subject: [PATCH] Implemented Navigation.js

---
 frontend/src/components/Navigation.js | 41 +++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 frontend/src/components/Navigation.js

diff --git a/frontend/src/components/Navigation.js b/frontend/src/components/Navigation.js
new file mode 100644
index 0000000..fe3d16c
--- /dev/null
+++ b/frontend/src/components/Navigation.js
@@ -0,0 +1,41 @@
+// Navigation.js
+import React, { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import '../css/Navigation.css'
+
+function Navigation() {
+    const [categories, setCategories] = useState([]);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        fetchCategories();
+    }, []);
+
+    const fetchCategories = async () => {
+        try {
+            const response = await fetch('http://localhost:5000/categories'); // Adjust this URL to where your API is hosted
+            if (!response.ok) throw new Error('Failed to fetch');
+            const data = await response.json();
+            setCategories(data);
+        } catch (error) {
+            console.error('Error fetching categories:', error);
+            setError(error.message);
+        }
+    };
+
+    if (error) return <p>Error loading categories: {error}</p>;
+
+    return (
+        <nav className="category-nav">
+            <ul>
+                {categories.map(category => (
+                    <li key={category.CategoryID}>
+                        <Link to={`/category/${category.Name}`}>{category.Name}</Link>
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+}
+
+export default Navigation;
-- 
GitLab