mango-ui-v3/pages/leaderboard.tsx

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>
)
}