You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import Link from "next/link"
|
|
import PropTypes from "prop-types"
|
|
import React from "react"
|
|
|
|
import logo from './sos-logo.png'
|
|
import styles from './style.module.css'
|
|
|
|
const Header = ({user}) => (
|
|
<header className={styles.container}>
|
|
<div className={styles.logo}>
|
|
<img alt="" src={logo}/>
|
|
</div>
|
|
<h1 className={styles.title}>
|
|
<Link href="/"><a>Society <span>of</span> Socks</a></Link>
|
|
</h1>
|
|
<ul className={styles.primaryNav}>
|
|
<li><Link href="/store/categories"><a>Catalogue</a></Link></li>
|
|
<li><Link href="/store/popular"><a>Popular</a></Link></li>
|
|
<li><Link href="/store/new"><a>New</a></Link></li>
|
|
</ul>
|
|
<ul className={styles.accountNav}>
|
|
<li><Link href="/store/cart"><a><span className="fa fa-shopping-cart"></span> Cart</a></Link></li>
|
|
{
|
|
(!user)?(
|
|
<li><Link href="/login"><a>Log in</a></Link></li>
|
|
):(
|
|
<>
|
|
<li><Link href="/account"><a>Account</a></Link></li>
|
|
<li><Link href="/api/auth/logout"><a>Log out</a></Link></li>
|
|
</>
|
|
)
|
|
}
|
|
</ul>
|
|
</header>
|
|
)
|
|
|
|
Header.propTypes = {
|
|
user: PropTypes.object,
|
|
}
|
|
|
|
Header.defaultProps = {
|
|
user: null,
|
|
}
|
|
|
|
export default Header
|