msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[question][ui] fix contribute question bottom bar

Browse Source
pull/468/head
wlren 3 years ago
parent dad84d0720
commit 9f214cddc2
2 changed files with 95 additions and 93 deletions
Show Stats Download Patch File Download Diff File

2
apps/portal/src/components/questions/ContributeQuestionDialog.tsx
Unescape View File

@ -61,7 +61,7 @@ export default function ContributeQuestionDialog({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"> leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<Dialog.Panel className="relative w-full max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8"> <Dialog.Panel className="relative w-full max-w-5xl transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8">
<div className="bg-white p-6 pt-5 sm:pb-4"> <div className="bg-white px-6 pt-5">
<div className="flex flex-1 items-stretch"> <div className="flex flex-1 items-stretch">
<div className="mt-3 w-full sm:mt-0 sm:text-left"> <div className="mt-3 w-full sm:mt-0 sm:text-left">
<Dialog.Title <Dialog.Title

186
apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
Unescape View File

@ -58,101 +58,102 @@ export default function ContributeQuestionForm({
setCanSubmit(checked); setCanSubmit(checked);
}; };
return ( return (
<form <div className="flex flex-col justify-between gap-4">
className="flex flex-1 flex-col items-stretch justify-center gap-y-4" <form
onSubmit={handleSubmit(onSubmit)}> className="flex flex-1 flex-col items-stretch justify-center gap-y-4"
<div className="min-w-[113px] max-w-[113px] flex-1"> onSubmit={handleSubmit(onSubmit)}>
<Select <div className="min-w-[113px] max-w-[113px] flex-1">
defaultValue="coding" <Select
label="Type" defaultValue="coding"
options={QUESTION_TYPES} label="Type"
required={true} options={QUESTION_TYPES}
{...selectRegister('questionType')} required={true}
/> {...selectRegister('questionType')}
</div>
<TextArea
label="Question Prompt"
placeholder="Contribute a question"
required={true}
rows={5}
{...register('questionContent')}
/>
<HorizontalDivider />
<h2 className="text-md text-primary-800 font-semibold">
Additional information
</h2>
<div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
<div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
<Controller
control={control}
name="location"
render={({ field }) => (
<LocationTypeahead
required={true}
onSelect={(option) => {
field.onChange(option.value);
}}
{...field}
value={LOCATIONS.find(
(location) => location.value === field.value,
)}
/>
)}
/> />
</div> </div>
<div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]"> <TextArea
<Controller label="Question Prompt"
control={control} placeholder="Contribute a question"
name="date" required={true}
render={({ field }) => ( rows={5}
<MonthYearPicker {...register('questionContent')}
monthRequired={true} />
value={{ <HorizontalDivider />
month: ((field.value.getMonth() as number) + 1) as Month, <h2 className="text-md text-primary-800 font-semibold">
year: field.value.getFullYear(), Additional information
}} </h2>
yearRequired={true} <div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
onChange={({ month, year }) => <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
field.onChange(startOfMonth(new Date(year, month - 1))) <Controller
} control={control}
/> name="location"
)} render={({ field }) => (
/> <LocationTypeahead
</div> required={true}
</div> onSelect={(option) => {
<div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end"> field.onChange(option.value);
<div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]"> }}
<Controller {...field}
control={control} value={LOCATIONS.find(
name="company" (location) => location.value === field.value,
render={({ field }) => ( )}
<CompanyTypeahead />
required={true} )}
onSelect={({ id }) => { />
field.onChange(id); </div>
}} <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
/> <Controller
)} control={control}
/> name="date"
render={({ field }) => (
<MonthYearPicker
monthRequired={true}
value={{
month: ((field.value.getMonth() as number) + 1) as Month,
year: field.value.getFullYear(),
}}
yearRequired={true}
onChange={({ month, year }) =>
field.onChange(startOfMonth(new Date(year, month - 1)))
}
/>
)}
/>
</div>
</div> </div>
<div className="flex-1 sm:min-w-[150px] sm:max-w-[200px]"> <div className="flex flex-col flex-wrap items-stretch gap-2 sm:flex-row sm:items-end">
<Controller <div className="flex-1 sm:min-w-[150px] sm:max-w-[300px]">
control={control} <Controller
name="role" control={control}
render={({ field }) => ( name="company"
<RoleTypeahead render={({ field }) => (
required={true} <CompanyTypeahead
onSelect={(option) => { required={true}
field.onChange(option.value); onSelect={({ id }) => {
}} field.onChange(id);
{...field} }}
value={ROLES.find((role) => role.value === field.value)} />
/> )}
)} />
/> </div>
<div className="flex-1 sm:min-w-[150px] sm:max-w-[200px]">
<Controller
control={control}
name="role"
render={({ field }) => (
<RoleTypeahead
required={true}
onSelect={(option) => {
field.onChange(option.value);
}}
{...field}
value={ROLES.find((role) => role.value === field.value)}
/>
)}
/>
</div>
</div> </div>
</div> {/* <div className="w-full">
{/* <div className="w-full">
<HorizontalDivider /> <HorizontalDivider />
</div> </div>
<h1 className="mb-3"> <h1 className="mb-3">
@ -171,6 +172,7 @@ export default function ContributeQuestionForm({
}} }}
/> />
</div> */} </div> */}
</form>
<div <div
className="bg-primary-50 flex w-full flex-col gap-y-2 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)] sm:flex-row sm:justify-between" className="bg-primary-50 flex w-full flex-col gap-y-2 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)] sm:flex-row sm:justify-between"
style={{ style={{
@ -199,6 +201,6 @@ export default function ContributeQuestionForm({
variant="primary"></Button> variant="primary"></Button>
</div> </div>
</div> </div>
</form> </div>
); );
} }

Write Preview
Loading…
Cancel
Save