52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import LeaderboardTable from '../components/LeaderboardTable'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { useState } from 'react'
|
|
import ButtonGroup from 'components/ButtonGroup'
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale, [
|
|
'common',
|
|
'delegate',
|
|
'profile',
|
|
])),
|
|
// Will be passed to the page component as props
|
|
},
|
|
}
|
|
}
|
|
|
|
const leaderboardRangePresets = [
|
|
{ label: '7d', value: '7' },
|
|
{ label: '30d', value: '29' },
|
|
{ label: 'All', value: '9999' },
|
|
]
|
|
const leaderboardRangePresetLabels = leaderboardRangePresets.map((x) => x.label)
|
|
const leaderboardRangePresetValues = leaderboardRangePresets.map((x) => x.value)
|
|
|
|
export default function Leaderboard() {
|
|
const { t } = useTranslation('common')
|
|
const [leaderboardRange, setLeaderboardRange] = useState('29')
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex flex-col pt-6 pb-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<h1 className={`mb-4 text-2xl font-semibold text-th-fgd-1 sm:mb-0`}>
|
|
{t('leaderboard')}
|
|
</h1>
|
|
<div className="w-full sm:ml-auto sm:w-56">
|
|
<ButtonGroup
|
|
activeValue={leaderboardRange}
|
|
className="h-8"
|
|
onChange={(r) => setLeaderboardRange(r)}
|
|
values={leaderboardRangePresetValues}
|
|
names={leaderboardRangePresetLabels}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<LeaderboardTable range={leaderboardRange} />
|
|
</div>
|
|
)
|
|
}
|