Put leaderboards side-by-side on large screens

This commit is contained in:
jahooma 2022-01-17 21:10:25 -06:00
parent 7ffd41c859
commit 275b773466

View File

@ -2,7 +2,6 @@ import _ from 'lodash'
import Image from 'next/image' import Image from 'next/image'
import { Col } from '../components/layout/col' 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 { Page } from '../components/page' import { Page } from '../components/page'
import { SiteLink } from '../components/site-link' import { SiteLink } from '../components/site-link'
import { Title } from '../components/title' import { Title } from '../components/title'
@ -33,7 +32,7 @@ export default function Leaderboards(props: {
return ( return (
<Page> <Page>
<Col className="items-center"> <Col className="items-center lg:flex-row gap-10">
<Leaderboard <Leaderboard
title="Top traders" title="Top traders"
users={topTraders} users={topTraders}
@ -44,7 +43,6 @@ export default function Leaderboards(props: {
}, },
]} ]}
/> />
<Spacer h={4} />
<Leaderboard <Leaderboard
title="Top creators" title="Top creators"
users={topCreators} users={topCreators}
@ -91,7 +89,7 @@ function Leaderboard(props: {
<SiteLink className="relative" href={`/${user.username}`}> <SiteLink className="relative" href={`/${user.username}`}>
<Row className="items-center gap-4"> <Row className="items-center gap-4">
<Image <Image
className="rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-gray-50" className="rounded-full bg-gray-400 flex-shrink-0 ring-8 ring-gray-50"
src={user.avatarUrl} src={user.avatarUrl}
alt="" alt=""
width={32} width={32}