devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the profile of the Corporate user according to the client's instructions

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-01-16 16:26:59 +00:00
parent c68e206aae
commit c5007a316f
5 changed files with 341 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/High/EmploymentStatusInput.tsx Normal file
View File

@@ -0,0 +1,32 @@
import {EmploymentStatus, EMPLOYMENT_STATUS} from "@/interfaces/user";
import {RadioGroup} from "@headlessui/react";
import clsx from "clsx";
interface Props {
value?: EmploymentStatus;
onChange: (value?: EmploymentStatus) => void;
}
export default function EmploymentStatusInput({value, onChange}: Props) {
return (
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
<RadioGroup value={value} onChange={onChange} className="grid grid-cols-2 items-center gap-4 place-items-center">
{EMPLOYMENT_STATUS.map(({status, label}) => (
<RadioGroup.Option value={status} key={status}>
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
{label}
</span>
)}
</RadioGroup.Option>
))}
</RadioGroup>
</div>
);
}

54
src/components/High/GenderInput.tsx Normal file
View File

@@ -0,0 +1,54 @@
import {Gender} from "@/interfaces/user";
import {RadioGroup} from "@headlessui/react";
import clsx from "clsx";
interface Props {
value?: Gender;
onChange: (value?: Gender) => void;
}
export default function GenderInput({value, onChange}: Props) {
return (
<div className="relative flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
<RadioGroup value={value} onChange={onChange} className="flex flex-row gap-4 justify-between">
<RadioGroup.Option value="male">
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
Male
</span>
)}
</RadioGroup.Option>
<RadioGroup.Option value="female">
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
Female
</span>
)}
</RadioGroup.Option>
<RadioGroup.Option value="other">
{({checked}) => (
<span
className={clsx(
"px-6 py-4 w-28 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
Other
</span>
)}
</RadioGroup.Option>
</RadioGroup>
</div>
);
}