60 lines
1.7 KiB
TypeScript
60 lines
1.7 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;
|