submissions

src/views/mission/statement/Header.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { chevroneLeft, chevroneRight, arrowLeft } from "../../../assets/icons/header";
+import { Logo } from "../../../assets/logos";
+import { useNavigate } from "react-router-dom";
+
+interface HeaderProps {
+    missionId: number;
+}
+
+const Header: React.FC<HeaderProps> = ({
+    missionId
+}) => {
+    const navigate = useNavigate();
+    return (
+        <header className="w-full h-[60px] flex items-center px-4 gap-[20px]">
+            <img src={Logo} alt="Logo" className="h-[28px] w-auto cursor-pointer" onClick={() => { navigate("/home") }} />
+
+            <img src={arrowLeft} alt="back" className="h-[24px] w-[24px] cursor-pointer" onClick={() => { navigate("/home/missions") }} />
+
+            <div className="flex gap-[10px]">
+                <img src={chevroneLeft} alt="back" className="h-[24px] w-[24px] cursor-pointer" onClick={() => { navigate(`/mission/${missionId - 1}`) }} />
+                <span>{missionId}</span>
+                <img src={chevroneRight} alt="back" className="h-[24px] w-[24px] cursor-pointer" onClick={() => { navigate(`/mission/${missionId + 1}`) }} />
+            </div>
+
+        </header>
+    );
+};
+
+export default Header;