Don't show JobDropdown if party isn't editable

components/JobSection/index.scss

@@ -12,6 +12,12 @@
     flex-direction: column;
     width: 100%;
 
+    h3 {
+      font-size: $font-medium;
+      font-weight: $medium;
+      padding: $unit 0 $unit * 2;
+    }
+
     select {
       flex-grow: 0;
     }

components/JobSection/index.tsx

@@ -1,6 +1,7 @@
 import React, { ForwardedRef, useEffect, useState } from "react"
-import { useTranslation } from "next-i18next"
+import { useRouter } from "next/router"
 import { useSnapshot } from "valtio"
+import { useTranslation } from "next-i18next"
 
 import JobDropdown from "~components/JobDropdown"
 import JobSkillItem from "~components/JobSkillItem"
@@ -25,6 +26,10 @@ const JobSection = (props: Props) => {
   const { party } = useSnapshot(appState)
   const { t } = useTranslation("common")
 
+  const router = useRouter()
+  const locale =
+    router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+
   const [job, setJob] = useState<Job>()
   const [imageUrl, setImageUrl] = useState("")
   const [numSkills, setNumSkills] = useState(4)
@@ -132,11 +137,16 @@ const JobSection = (props: Props) => {
         <div className="Overlay" />
       </div>
       <div className="JobDetails">
-        <JobDropdown
+        {props.editable ? (
-          currentJob={party.job?.id}
+          <JobDropdown
-          onChange={receiveJob}
+            currentJob={party.job?.id}
-          ref={selectRef}
+            onChange={receiveJob}
-        />
+            ref={selectRef}
+          />
+        ) : (
+          <h3>{party.job?.name[locale]}</h3>
+        )}
+
         <ul className="JobSkills">
           {[...Array(numSkills)].map((e, i) => (
             <li key={`job-${i}`}>