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.
60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import Link from "next/link"
|
|
import PropTypes from "prop-types"
|
|
import React from "react"
|
|
|
|
import useUser from '~/hooks/useUser'
|
|
import useCart from '~/hooks/useCart'
|
|
import logo from './sos-logo.png'
|
|
import styles from './style.module.css'
|
|
|
|
import AdminNav from '~/components/adminNav'
|
|
|
|
const Header = () => {
|
|
const user = useUser()
|
|
const [cart] = useCart()
|
|
const cartSize = (cart && cart.items.length) ? cart.items.map(item => item.count).reduce((sum, current) => (sum + current)) : 0
|
|
|
|
return (
|
|
<>
|
|
<AdminNav/>
|
|
<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{cartSize > 0 ? ` (${cartSize})` : ''}</a></Link></li>
|
|
{
|
|
(!user)?(
|
|
<li><Link href="/login"><a>Log in</a></Link></li>
|
|
):(
|
|
<>
|
|
<li><Link href="/account"><a>Account</a></Link></li>
|
|
{user.is_admin && <li><Link href="/admin"><a>Admin</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
|