From 0129b0f4693e6db8772f3395a390f51325a63268 Mon Sep 17 00:00:00 2001
From: vik378 <viktor.kravchenko@deutschebahn.com>
Date: Thu, 21 Mar 2024 14:45:21 +0100
Subject: [PATCH] moved header into a separate component

---
 frontend/src/components/Breadcrumbs.jsx  |  1 +
 frontend/src/components/Header.jsx       | 17 ++++++++++-------
 frontend/src/components/TemplateView.jsx |  9 ++-------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Breadcrumbs.jsx b/frontend/src/components/Breadcrumbs.jsx
index 98926cc..b50770e 100644
--- a/frontend/src/components/Breadcrumbs.jsx
+++ b/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`);
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index c6cbbec..2a7cb22 100644
--- a/frontend/src/components/Header.jsx
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/components/TemplateView.jsx b/frontend/src/components/TemplateView.jsx
index c004ff9..17d04d8 100644
--- a/frontend/src/components/TemplateView.jsx
+++ b/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 */}