/
HeaderComponent.tsx
65 lines (64 loc) · 1.84 KB
/
HeaderComponent.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { Button } from "../utils/Button/Button";
import image from "../../assets/image/pos.svg";
import "./header.scss";
import { User } from "../../types";
import { Link } from "react-router-dom";
import PosPhoto from "../../assets/image/credit_card.svg";
import CatPhoto from "../../assets/image/category.svg";
import ProPhoto from "../../assets/image/product.svg";
interface HeaderProps {
user?: Partial<User>;
onLogin: () => void;
onLogout: () => void;
}
const HeaderComponent = ({ user, onLogin, onLogout }: HeaderProps) => {
return (
<header>
<div className="wrapper">
<div className="header">
<Link className="header-logo" to="/">
<img alt="logo" src={image} />
<h1>POS Store</h1>
</Link>
<Link to="/" className="header-link">
<Button>
<img alt="Credit" src={PosPhoto} />
POS
</Button>
</Link>
<Link to="/categories" className="header-link">
<Button>
<img alt="CatPhoto" src={CatPhoto} />
Categories
</Button>
</Link>
<Link to="/products" className="header-link">
<Button>
<img alt="ProPhoto" src={ProPhoto} />
Products
</Button>
</Link>
</div>
<div>
{user?.username ? (
<>
<span className="welcome">
Welcome, <b>{user?.username}</b>!
</span>
<Button size="small" onClick={onLogout}>
Log out
</Button>
</>
) : (
<>
<Button size="small" primary onClick={onLogin}>
Log in
</Button>
</>
)}
</div>
</div>
</header>
);
};
export default HeaderComponent;