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.
56 lines
1.5 KiB
56 lines
1.5 KiB
import { ReactNode } from 'react' |
|
import { Avatar, Button, Dropdown, Menu } from 'antd' |
|
import { Header } from 'antd/lib/layout/layout' |
|
import { Link, useHistory } from 'react-router-dom' |
|
import { useUserContext } from '../../../contexts/UserContext' |
|
|
|
import './style.scss' |
|
|
|
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 ( |
|
<div className="stax-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> |
|
</div> |
|
) |
|
}
|
|
|