manifold/web/components/nav/profile-menu.tsx
Marshall Polaris adefd3259c
Cleanup avatar component rendering (#130)
* Remove unnecessary classes on avatar img

I don't believe these have any visible effect.

* 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.

* Remove unnecessary avatar wrapper div

* Remove old prop from avatar
2022-05-05 09:50:58 -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>
)
}