[portal] add job titles typeahead

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];
+}

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 (
+    <Typeahead
+      disabled={disabled}
+      isLabelHidden={isLabelHidden}
+      label="Job Title"
+      noResultsMessage="No available job titles."
+      nullable={true}
+      options={options}
+      placeholder={placeHolder}
+      required={required}
+      onQueryChange={setQuery}
+      onSelect={onSelect}
+    />
+  );
+}

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<TypeaheadOption | null>(null);
+  const [selectedJobTitle, setSelectedJobTitle] =
+    useState<TypeaheadOption | null>(null);
   const [monthYear, setMonthYear] = useState<MonthYear>({
     month: (new Date().getMonth() + 1) as Month,
     year: new Date().getFullYear(),
@@ -30,6 +33,11 @@ export default function HomePage() {
           />
           <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
           <HorizontalDivider />
+          <JobTitlesTypeahead
+            onSelect={(option) => setSelectedJobTitle(option)}
+          />
+          <pre>{JSON.stringify(selectedJobTitle, null, 2)}</pre>
+          <HorizontalDivider />
           <MonthYearPicker value={monthYear} onChange={setMonthYear} />
           <HorizontalDivider />
           <Button