Filter out SG from traders. Center leaderboard. Use Nextjs Image.
This commit is contained in:
parent
129ef23a4e
commit
df2f8046b0
|
@ -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() {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user