You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.5 KiB
57 lines
1.5 KiB
3 years ago
|
import { ReactNode } from 'react'
|
||
3 years ago
|
import { Avatar, Button, Dropdown, Menu } from 'antd'
|
||
3 years ago
|
import { Header } from 'antd/lib/layout/layout'
|
||
3 years ago
|
import { Link, useHistory } from 'react-router-dom'
|
||
3 years ago
|
import { useUserContext } from '../../../contexts/UserContext'
|
||
3 years ago
|
|
||
3 years ago
|
import './style.scss'
|
||
3 years ago
|
|
||
|
type Props = {
|
||
3 years ago
|
children: ReactNode
|
||
3 years ago
|
}
|
||
|
|
||
3 years ago
|
export const AppHeader = ({ children }: Props) => {
|
||
|
const { user, handleLogout } = useUserContext()
|
||
3 years ago
|
const history = useHistory()
|
||
3 years ago
|
|
||
3 years ago
|
// Unauthed Header
|
||
|
if (!user)
|
||
|
return (
|
||
3 years ago
|
<Header className="stax-header">
|
||
|
<h3>CashStacks! 💵</h3>
|
||
3 years ago
|
</Header>
|
||
|
)
|
||
|
|
||
|
// Authed Header
|
||
|
return (
|
||
3 years ago
|
<div className="stax-header">
|
||
3 years ago
|
<div className="header-left">
|
||
3 years ago
|
<Link to="/">
|
||
3 years ago
|
<h3>MVP Django React! 🤠</h3>
|
||
3 years ago
|
</Link>
|
||
3 years ago
|
{children}
|
||
3 years ago
|
</div>
|
||
3 years ago
|
<div>
|
||
3 years ago
|
{/* <Button onClick={() => history.push('/new/user')}>New User</Button> */}
|
||
3 years ago
|
</div>
|
||
3 years ago
|
<div className="header-right">
|
||
3 years ago
|
<p>Welcome, {user.name}!!</p>
|
||
3 years ago
|
<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>
|
||
|
}
|
||
|
>
|
||
3 years ago
|
<Avatar>{user.name[0]}</Avatar>
|
||
3 years ago
|
</Dropdown>
|
||
3 years ago
|
</div>
|
||
3 years ago
|
</div>
|
||
3 years ago
|
)
|
||
|
}
|