moved header into a separate component

frontend/src/components/Breadcrumbs.jsx

@@ -6,6 +6,7 @@ export const Breadcrumbs = () => {
   const location = useLocation();
   const [breadcrumbLabels, setBreadcrumbLabels] = useState({});
   const pathnames = location.pathname.split('/').filter(x => x);
+  const [error, setError] = useState(null);
 
   const fetchModelInfo = async () => {
     const response = await fetch(API_BASE_URL + `/model-info`);

frontend/src/components/Header.jsx

@@ -1,10 +1,13 @@
-const Header = () => {
+import React from "react";
+import {Breadcrumbs} from "./Breadcrumbs";
+import {ThemeSwitcher} from "./ThemeSwitcher";
+
+export const Header = () => {
     return (
-      <div className="sticky top-0 z-50 shadow bg-indigo-500 text-indigo-50">
-        <header>
-        <p>Stuff goes here</p>
-        </header>
-      </div>
+      <header className=" text-gray-700 p-4 flex justify-between items-center">
+          <div><Breadcrumbs /></div>
+          <div></div>
+          <div><ThemeSwitcher /></div>
+      </header>
     );
   };
-  export default Header;

frontend/src/components/TemplateView.jsx

@@ -8,8 +8,7 @@ import React, {useEffect, useState} from 'react';
 import { TemplateDetails } from './TemplateDetails';
 import { useLocation, useParams, Navigate } from 'react-router-dom';
 import { InstanceView } from './InstanceView';
-import { Breadcrumbs } from './Breadcrumbs';
-import { ThemeSwitcher } from './ThemeSwitcher';
+import { Header } from './Header';
 
 export const TemplateView = ({endpoint}) => {
     let { templateName, objectID } = useParams();
@@ -21,11 +20,7 @@ export const TemplateView = ({endpoint}) => {
     return (
         <div className="flex flex-col h-screen"> {/* Use h-screen to ensure the container fits the viewport height */}
             {/* Header */}
-            <header className=" text-gray-700 p-4 flex justify-between items-center">
-                <div><Breadcrumbs /></div>
-                <div></div>
-                <div><ThemeSwitcher /></div>
-            </header>
+            <Header />
 
             {/* Body: Sidebar + Main Content */}
             <div className="flex flex-1 overflow-hidden"> {/* This ensures the remaining height is distributed here */}