🐢

frontend/src/app/layout/AppHeader.tsx

@@ -0,0 +1,47 @@
+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 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>
+  )
+}