import { useRouter } from 'next/router' import { Form, Select } from './form' export function UsageHeader () { const router = useRouter() return ( <Form initial={{ when: router.query.when || 'day' }} > <div className='text-muted font-weight-bold my-3 d-flex align-items-center'> user analytics for <Select groupClassName='mb-0 ml-2' className='w-auto' name='when' size='sm' items={['day', 'week', 'month', 'year', 'forever']} onChange={(formik, e) => router.push(`/users/${e.target.value}`)} /> </div> </Form> ) }