diff --git a/apps/portal/src/components/shared/JobTitles.ts b/apps/portal/src/components/shared/JobTitles.ts new file mode 100644 index 00000000..0dfcb336 --- /dev/null +++ b/apps/portal/src/components/shared/JobTitles.ts @@ -0,0 +1,31 @@ +export const JobTitleLabels = { + 'ai-ml-engineer': 'AI/ML Engineer', + 'algorithms-engineer': 'Algorithms Engineer', + 'android-engineer': 'Android Software Engineer', + 'applications-engineer': 'Applications Engineer', + 'back-end-engineer': 'Back End Engineer', + 'business-engineer': 'Business Engineer', + 'data-engineer': 'Data Engineer', + 'devops-engineer': 'DevOps Engineer', + 'enterprise-engineer': 'Enterprise Engineer', + 'front-end-engineer': 'Front End Engineer', + 'hardware-engineer': 'Hardware Engineer', + 'ios-engineer': 'iOS Software Engineer', + 'mobile-engineer': 'Mobile Software Engineer (iOS + Android)', + 'networks-engineer': 'Networks Engineer', + 'partner-engineer': 'Partner Engineer', + 'production-engineer': 'Production Engineer', + 'research-engineer': 'Research Engineer', + 'sales-engineer': 'Sales Engineer', + 'security-engineer': 'Security Engineer', + 'site-reliability-engineer': 'Site Reliability Engineer (SRE)', + 'software-engineer': 'Software Engineer', + 'systems-engineer': 'Systems Engineer', + 'test-engineer': 'QA/Test Engineer (SDET)', +}; + +export type JobTitleType = keyof typeof JobTitleLabels; + +export function getLabelForJobTitleType(jobTitle: JobTitleType): string { + return JobTitleLabels[jobTitle]; +} diff --git a/apps/portal/src/components/shared/JobTitlesTypahead.tsx b/apps/portal/src/components/shared/JobTitlesTypahead.tsx new file mode 100644 index 00000000..036af8f1 --- /dev/null +++ b/apps/portal/src/components/shared/JobTitlesTypahead.tsx @@ -0,0 +1,48 @@ +import { useState } from 'react'; +import type { TypeaheadOption } from '@tih/ui'; +import { Typeahead } from '@tih/ui'; + +import { JobTitleLabels } from './JobTitles'; + +type Props = Readonly<{ + disabled?: boolean; + isLabelHidden?: boolean; + onSelect: (option: TypeaheadOption) => void; + placeHolder?: string; + required?: boolean; +}>; + +export default function JobTitlesTypeahead({ + disabled, + onSelect, + isLabelHidden, + placeHolder, + required, +}: Props) { + const [query, setQuery] = useState(''); + const options = Object.entries(JobTitleLabels) + .map(([slug, label]) => ({ + id: slug, + label, + value: slug, + })) + .filter( + ({ label }) => + label.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) > -1, + ); + + return ( + + ); +} diff --git a/apps/portal/src/pages/test__.tsx b/apps/portal/src/pages/test__.tsx index 26859c56..f7309e26 100644 --- a/apps/portal/src/pages/test__.tsx +++ b/apps/portal/src/pages/test__.tsx @@ -5,12 +5,15 @@ import { useToast } from '@tih/ui'; import { HorizontalDivider } from '@tih/ui'; import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; +import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead'; import type { Month, MonthYear } from '~/components/shared/MonthYearPicker'; import MonthYearPicker from '~/components/shared/MonthYearPicker'; export default function HomePage() { const [selectedCompany, setSelectedCompany] = useState(null); + const [selectedJobTitle, setSelectedJobTitle] = + useState(null); const [monthYear, setMonthYear] = useState({ month: (new Date().getMonth() + 1) as Month, year: new Date().getFullYear(), @@ -30,6 +33,11 @@ export default function HomePage() { />
{JSON.stringify(selectedCompany, null, 2)}
+ setSelectedJobTitle(option)} + /> +
{JSON.stringify(selectedJobTitle, null, 2)}
+