manifold/web/components/nav/profile-menu.tsx
Marshall Polaris 02e7efe30c Don't apply Tailwind 'avatar' class in menu
We don't use this class elsewhere when displaying avatars (instead our
avatar has manual styles that do the stuff Tailwind is trying to do)
and it just assigns a weird size that we don't want.

If we want to use the Tailwind avatar styles we should refactor further.
2022-05-03 22:32:48 -07:00

43 lines
1.4 KiB
TypeScript

import { firebaseLogout, User } from '../../lib/firebase/users'
import { formatMoney } from '../../../common/util/format'
import { Avatar } from '../avatar'
import { IS_PRIVATE_MANIFOLD } from '../../../common/envs/constants'
import { Row } from '../layout/row'
export function getNavigationOptions(user?: User | null) {
if (IS_PRIVATE_MANIFOLD) {
return [{ name: 'Leaderboards', href: '/leaderboards' }]
}
if (!user) {
return [
{ name: 'Leaderboards', href: '/leaderboards' },
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
]
}
return [
{ name: 'Add funds', href: '/add-funds' },
{ name: 'Leaderboards', href: '/leaderboards' },
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
{ name: 'About', href: 'https://docs.manifold.markets' },
{ name: 'Sign out', href: '#', onClick: () => firebaseLogout() },
]
}
export function ProfileSummary(props: { user: User | undefined }) {
const { user } = props
return (
<Row className="group items-center gap-4 rounded-md py-3 text-gray-500 group-hover:bg-gray-100 group-hover:text-gray-700">
<Avatar avatarUrl={user?.avatarUrl} username={user?.username} noLink />
<div className="truncate text-left">
<div>{user?.name}</div>
<div className="text-sm">
{user ? formatMoney(Math.floor(user.balance)) : ' '}
</div>
</div>
</Row>
)
}