57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { ReactNode } from 'react'
|
|
import { Avatar, Dropdown, Menu } from 'antd'
|
|
import { Link, useHistory } from 'react-router-dom'
|
|
import { useUserContext } from '../../contexts/UserContext'
|
|
|
|
import './style.scss'
|
|
import { Button } from '../../elements/Button'
|
|
|
|
type Props = {
|
|
children: ReactNode
|
|
}
|
|
|
|
export const AppHeader = ({ children }: Props) => {
|
|
const { user, handleLogout } = useUserContext()
|
|
const history = useHistory()
|
|
|
|
// Unauthed Header
|
|
if (!user)
|
|
return (
|
|
<header className="stax-header">
|
|
<h3>CashStacks! 💵</h3>
|
|
</header>
|
|
)
|
|
|
|
// Authed Header
|
|
return (
|
|
<header>
|
|
<div className="header-left">
|
|
<Link to="/">
|
|
<h3>MVP Django React! 🤠</h3>
|
|
</Link>
|
|
{children}
|
|
</div>
|
|
<div>
|
|
{/* <Button onClick={() => history.push('/new/user')}>New User</Button> */}
|
|
</div>
|
|
<div className="header-right">
|
|
<p>Welcome, {user.name}!!</p>
|
|
<Dropdown
|
|
overlay={
|
|
<Menu style={{ display: 'flex', flexDirection: 'column' }}>
|
|
<Button onClick={() => history.push('/login')}>Login</Button>
|
|
<Button onClick={handleLogout}>Logout</Button>
|
|
<Button onClick={() => history.push('/forgot-password')}>
|
|
Forgot Password
|
|
</Button>
|
|
<Button onClick={() => history.push('/profile')}>Profile</Button>
|
|
</Menu>
|
|
}
|
|
>
|
|
<Avatar>{user.name[0]}</Avatar>
|
|
</Dropdown>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|