stacker.news/components/top-header.js

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