stacker.news/components/sub-select-form.js

69 lines
1.7 KiB
JavaScript

import { useRouter } from 'next/router'
import { Select } from './form'
import Info from './info'
import { SUBS, SUBS_NO_JOBS } from '../lib/constants'
export function SubSelectInitial ({ sub }) {
const router = useRouter()
sub = sub || router.query.sub || 'pick sub'
return {
sub
}
}
export default function SubSelect ({ label, sub, setSub, item, ...props }) {
const router = useRouter()
const SubInfo = () => (
<Info>
<div>
<div className='fw-bold'>The sub your post will go in ...</div>
<ul>
<li>If it's bitcoin related, put it in the bitcoin sub.</li>
<li>If it's nostr related, put it in the nostr sub.</li>
<li>If it's tech related, put it in the tech sub.</li>
<li>If it's stacker news related, put it in the meta sub.</li>
<li>If it's a job, put it in the jobs sub.</li>
</ul>
</div>
</Info>
)
sub ||= router.query.sub || 'pick sub'
const extraProps = props.noForm
? {
value: sub,
items: ['pick sub', ...SUBS]
}
: {
overrideValue: sub,
items: item ? SUBS_NO_JOBS : ['pick sub', ...SUBS_NO_JOBS]
}
return (
<Select
className='w-auto d-flex'
onChange={(formik, e) => {
if (!item) {
router.push({
pathname: e.target.value === 'pick sub' ? '/post' : `/~${e.target.value}/post`,
query: router.query?.type ? { type: router.query.type } : undefined
})
} else {
setSub(e.target.value)
}
}}
name='sub'
size='sm'
{...extraProps}
label={label &&
<>
{label}
<SubInfo />
</>}
{...props}
/>
)
}