31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
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;
|