Add seniority setting

app/css/pages/settings.css

@@ -150,6 +150,15 @@
             @apply leading-150 text-textColor6;
         }
     }
+
+    .seniority {
+        .c-single-select {
+            .c-results-zone button,
+            button {
+                @apply shadow-sm;
+            }
+        }
+    }
     & .pronouns-section {
         & .instructions {
             @apply mb-24;

app/helpers/react_components/settings/profile_form.rb

@@ -6,7 +6,8 @@ def to_s
           user: {
             name: current_user.name,
             location: current_user.location,
-            bio: current_user.bio
+            bio: current_user.bio,
+            seniority: current_user.seniority
           },
           profile:,
           links: {

app/javascript/components/modals/seniority-survey-modal/InitialView.tsx

@@ -10,7 +10,7 @@ import { ErrorFallback } from '@/components/common/ErrorFallback'
 
 const DEFAULT_ERROR = new Error('Unable to save seniority level.')
 
-const SENIORITIES: { label: string; value: SeniorityLevel }[] = [
+export const SENIORITIES: { label: string; value: SeniorityLevel }[] = [
   {
     label: 'Absolute Beginner',
     value: 'absolute_beginner',

app/javascript/components/settings/EmailForm.tsx

@@ -65,12 +65,12 @@ export default function EmailForm({
         />
       </div>
       <div className="field">
-        <label htmlFor="user_sudo_password" className="label">
+        <label htmlFor="user_sudo_password_email" className="label">
           Confirm your password
         </label>
         <input
           type="password"
-          id="user_sudo_password"
+          id="user_sudo_password_email"
           value={state.password}
           onChange={(e) => setState({ ...state, password: e.target.value })}
           required

app/javascript/components/settings/HandleForm.tsx

@@ -65,12 +65,12 @@ export default function HandleForm({
         />
       </div>
       <div className="field">
-        <label htmlFor="user_sudo_password" className="label">
+        <label htmlFor="user_sudo_password_handle" className="label">
           Confirm your password
         </label>
         <input
           type="password"
-          id="user_sudo_password"
+          id="user_sudo_password_handle"
           value={state.password}
           onChange={(e) => setState({ ...state, password: e.target.value })}
           required

app/javascript/components/settings/ProfileForm.tsx

@@ -6,11 +6,14 @@ import { FormMessage } from './FormMessage'
 import { FauxInputWithValidation } from './inputs/FauxInputWithValidation'
 import { InputWithValidation } from './inputs/InputWithValidation'
 import { createMaxLengthAttributes } from './useInvalidField'
+import { SeniorityLevel } from '../modals/welcome-modal/WelcomeModal'
+import { SingleSelect } from '../common/SingleSelect'
 
 type User = {
   name: string
   location: string
   bio: string
+  seniority: SeniorityLevel
 }
 
 type Profile = {
@@ -97,6 +100,17 @@ export default function ProfileForm({
           Tell the world about you 🌎. Emojis encouraged!
         </div>
       </div>
+
+      <div className="seniority field">
+        <label htmlFor="user_seniority" className="label">
+          Seniority
+        </label>
+        <SenioritySelect
+          value={user.seniority}
+          setValue={(value) => setUser({ ...user, seniority: value })}
+        />
+      </div>
+
       {profile ? (
         <div className="pt-20 mt-24 border-t-1 border-borderColor6">
           <h2>Your social accounts</h2>
@@ -168,3 +182,37 @@ const SuccessMessage = () => {
     </div>
   )
 }
+
+function OptionComponent({ option }: { option: SeniorityLevel }): JSX.Element {
+  switch (option) {
+    case 'absolute_beginner':
+      return <div>Absolute Beginner</div>
+    case 'beginner':
+      return <div>Beginner</div>
+    case 'junior':
+      return <div>Junior Developer</div>
+    case 'mid':
+      return <div>Mid-level Developer</div>
+    case 'senior':
+      return <div>Senior Developer</div>
+  }
+}
+
+function SenioritySelect({
+  value,
+  setValue,
+}: {
+  value: SeniorityLevel
+  setValue: (value: SeniorityLevel) => void
+}): JSX.Element {
+  return (
+    <SingleSelect<SeniorityLevel>
+      className="w-[250px]"
+      options={['absolute_beginner', 'beginner', 'junior', 'mid', 'senior']}
+      value={value}
+      setValue={setValue}
+      SelectedComponent={OptionComponent}
+      OptionComponent={OptionComponent}
+    />
+  )
+}