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.
49 lines
1.3 KiB
49 lines
1.3 KiB
import React from 'react' |
|
import { Avatar, Button, Typography } from 'antd' |
|
import { Header } from 'antd/lib/layout/layout' |
|
import { User } from '../../types' |
|
import { Link, useHistory } from 'react-router-dom' |
|
|
|
export type NavRoute = { |
|
path: string |
|
component: any |
|
label: string |
|
exact?: boolean |
|
} |
|
|
|
type Props = { |
|
user: User | null |
|
routes?: NavRoute[] |
|
} |
|
|
|
export const AppHeader = ({ user, routes }: Props) => { |
|
const history = useHistory() |
|
// Unauthed Header |
|
if (!user) |
|
return ( |
|
<Header className="app-header"> |
|
<Typography.Title level={3}>MVP Django React! 🤠</Typography.Title> |
|
</Header> |
|
) |
|
|
|
// Authed Header |
|
return ( |
|
<Header className="app-header"> |
|
<div className="header-left"> |
|
<Typography.Title level={3}>MVP Django React! 🤠</Typography.Title> |
|
{routes?.map((route) => ( |
|
<Link key={`${route.path}-${route.label}`} to={route.path}> |
|
{route.label} |
|
</Link> |
|
))} |
|
</div> |
|
<div> |
|
<Button onClick={() => history.push('/new/user')}>New User</Button> |
|
</div> |
|
<div className="header-right"> |
|
<Typography.Paragraph>Welcome, {user.username}!!</Typography.Paragraph> |
|
<Avatar>{user.username[0]}</Avatar> |
|
</div> |
|
</Header> |
|
) |
|
}
|
|
|