59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
import { useRouter } from 'next/router'
|
|
import { Form, Select } from './form'
|
|
|
|
export default function TopHeader ({ cat }) {
|
|
const router = useRouter()
|
|
|
|
const top = async values => {
|
|
const what = values.what
|
|
delete values.what
|
|
if (values.sort === '') delete values.sort
|
|
if (values.when === '') delete values.when
|
|
await router.push({
|
|
pathname: `/top/${what}`,
|
|
query: values
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className='d-flex'>
|
|
<Form
|
|
className='mr-auto'
|
|
initial={{
|
|
what: cat,
|
|
sort: router.query.sort || '',
|
|
when: router.query.when || ''
|
|
}}
|
|
onSubmit={top}
|
|
>
|
|
<div className='text-muted font-weight-bold my-3 d-flex align-items-center'>
|
|
top
|
|
<Select
|
|
groupClassName='mx-2 mb-0'
|
|
onChange={(formik, e) => top({ ...formik?.values, what: e.target.value })}
|
|
name='what'
|
|
size='sm'
|
|
items={['posts', 'comments', 'users']}
|
|
/>
|
|
by
|
|
<Select
|
|
groupClassName='mx-2 mb-0'
|
|
onChange={(formik, e) => top({ ...formik?.values, sort: e.target.value })}
|
|
name='sort'
|
|
size='sm'
|
|
items={cat === 'users' ? ['stacked', 'spent', 'comments', 'posts', 'referrals'] : ['votes', 'comments', 'sats']}
|
|
/>
|
|
for
|
|
<Select
|
|
groupClassName='mb-0 ml-2'
|
|
onChange={(formik, e) => top({ ...formik?.values, when: e.target.value })}
|
|
name='when'
|
|
size='sm'
|
|
items={['day', 'week', 'month', 'year', 'forever']}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
)
|
|
}
|