2021-12-20 03:12:12 +00:00
|
|
|
import Image from 'next/image'
|
|
|
|
import { firebaseLogout, User } from '../lib/firebase/users'
|
|
|
|
import { formatMoney } from '../lib/util/format'
|
2022-01-11 06:16:58 +00:00
|
|
|
import { Col } from './layout/col'
|
2021-12-20 03:12:12 +00:00
|
|
|
import { MenuButton } from './menu'
|
|
|
|
|
|
|
|
export function ProfileMenu(props: { user: User }) {
|
|
|
|
const { user } = props
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<MenuButton
|
|
|
|
className="hidden md:block"
|
|
|
|
menuItems={getNavigationOptions(user, { mobile: false })}
|
|
|
|
buttonContent={<ProfileSummary user={user} />}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<MenuButton
|
2022-01-12 03:56:11 +00:00
|
|
|
className="md:hidden mr-2"
|
2021-12-20 03:12:12 +00:00
|
|
|
menuItems={getNavigationOptions(user, { mobile: true })}
|
|
|
|
buttonContent={<ProfileSummary user={user} />}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function getNavigationOptions(user: User, options: { mobile: boolean }) {
|
|
|
|
const { mobile } = options
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
name: 'Home',
|
|
|
|
href: '/',
|
|
|
|
},
|
|
|
|
...(mobile
|
|
|
|
? [
|
2022-01-12 03:56:11 +00:00
|
|
|
{
|
|
|
|
name: 'All markets',
|
|
|
|
href: '/markets',
|
|
|
|
},
|
2021-12-20 03:12:12 +00:00
|
|
|
{
|
|
|
|
name: 'Create a market',
|
|
|
|
href: '/create',
|
|
|
|
},
|
|
|
|
]
|
|
|
|
: []),
|
|
|
|
{
|
2021-12-24 21:06:01 +00:00
|
|
|
name: 'Your trades',
|
|
|
|
href: '/trades',
|
2021-12-20 03:12:12 +00:00
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Your markets',
|
|
|
|
href: `/${user.username}`,
|
|
|
|
},
|
2022-01-07 22:56:14 +00:00
|
|
|
// {
|
|
|
|
// name: 'Add funds',
|
|
|
|
// href: '/add-funds',
|
|
|
|
// },
|
2021-12-31 20:33:05 +00:00
|
|
|
{
|
|
|
|
name: 'Discord',
|
|
|
|
href: 'https://discord.gg/eHQBNBqXuh',
|
|
|
|
},
|
2022-01-12 07:18:14 +00:00
|
|
|
{
|
|
|
|
name: 'About',
|
|
|
|
href: '/about',
|
|
|
|
},
|
2021-12-20 03:12:12 +00:00
|
|
|
{
|
|
|
|
name: 'Sign out',
|
|
|
|
href: '#',
|
|
|
|
onClick: () => firebaseLogout(),
|
|
|
|
},
|
|
|
|
]
|
|
|
|
}
|
|
|
|
|
|
|
|
function ProfileSummary(props: { user: User }) {
|
|
|
|
const { user } = props
|
|
|
|
return (
|
2022-01-11 06:16:58 +00:00
|
|
|
<Col className="avatar items-center sm:flex-row gap-2 sm:gap-0">
|
|
|
|
<div className="rounded-full w-10 h-10 sm:mr-4">
|
2021-12-20 03:12:12 +00:00
|
|
|
<Image src={user.avatarUrl} width={40} height={40} />
|
|
|
|
</div>
|
2022-01-06 18:48:30 +00:00
|
|
|
<div className="truncate text-left" style={{ maxWidth: 170 }}>
|
2022-01-11 06:16:58 +00:00
|
|
|
<div className="hidden sm:flex">{user.name}</div>
|
2022-01-08 18:14:20 +00:00
|
|
|
<div className="text-gray-700 text-sm">
|
|
|
|
{formatMoney(Math.floor(user.balance))}
|
|
|
|
</div>
|
2021-12-20 03:12:12 +00:00
|
|
|
</div>
|
2022-01-11 06:16:58 +00:00
|
|
|
</Col>
|
2021-12-20 03:12:12 +00:00
|
|
|
)
|
|
|
|
}
|