Filter out SG from traders. Center leaderboard. Use Nextjs Image.

This commit is contained in:
jahooma 2022-01-17 20:56:37 -06:00
parent 129ef23a4e
commit df2f8046b0
2 changed files with 36 additions and 29 deletions

View File

@ -132,17 +132,18 @@ export function listenForAllUsers(setUsers: (users: User[]) => void) {
const topTradersQuery = query( const topTradersQuery = query(
collection(db, 'users'), collection(db, 'users'),
orderBy('totalPnLCached', 'desc'), orderBy('totalPnLCached', 'desc'),
limit(10) limit(21)
) )
export function getTopTraders() { export async function getTopTraders() {
return getValues<User>(topTradersQuery) const users = await getValues<User>(topTradersQuery)
return users.filter((user) => user.username !== 'SG').slice(0, 20)
} }
const topCreatorsQuery = query( const topCreatorsQuery = query(
collection(db, 'users'), collection(db, 'users'),
orderBy('creatorVolumeCached', 'desc'), orderBy('creatorVolumeCached', 'desc'),
limit(10) limit(20)
) )
export function getTopCreators() { export function getTopCreators() {

View File

@ -1,4 +1,6 @@
import _ from 'lodash' import _ from 'lodash'
import Image from 'next/image'
import { Col } from '../components/layout/col'
import { Row } from '../components/layout/row' import { Row } from '../components/layout/row'
import { Spacer } from '../components/layout/spacer' import { Spacer } from '../components/layout/spacer'
import { Page } from '../components/page' import { Page } from '../components/page'
@ -31,6 +33,7 @@ export default function Leaderboards(props: {
return ( return (
<Page> <Page>
<Col className="items-center">
<Leaderboard <Leaderboard
title="Top traders" title="Top traders"
users={topTraders} users={topTraders}
@ -52,6 +55,7 @@ export default function Leaderboards(props: {
}, },
]} ]}
/> />
</Col>
</Page> </Page>
) )
} }
@ -66,7 +70,7 @@ function Leaderboard(props: {
}) { }) {
const { title, users, columns } = props const { title, users, columns } = props
return ( return (
<div className="px-1"> <div className="max-w-xl w-full px-1">
<Title text={title} /> <Title text={title} />
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="table table-zebra table-compact text-gray-500 w-full"> <table className="table table-zebra table-compact text-gray-500 w-full">
@ -81,15 +85,17 @@ function Leaderboard(props: {
</thead> </thead>
<tbody> <tbody>
{users.map((user, index) => ( {users.map((user, index) => (
<tr> <tr key={user.id}>
<td>{index + 1}</td> <td>{index + 1}</td>
<td> <td>
<SiteLink className="relative" href={`/${user.username}`}> <SiteLink className="relative" href={`/${user.username}`}>
<Row className="items-center gap-4"> <Row className="items-center gap-4">
<img <Image
className="h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-gray-50" className="rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-gray-50"
src={user.avatarUrl} src={user.avatarUrl}
alt="" alt=""
width={32}
height={32}
/> />
<div>{user.name}</div> <div>{user.name}</div>
</Row> </Row>