feat: add job resume email

features/jobs/List.tsx

@@ -11,11 +11,12 @@ import { Modal } from 'antd'
 interface JobProps {
   jobs: JobItem[]
   cities: CityItem[]
+  email: string
 }
 const JobList: React.FC<JobProps> = props => {
   const i18n = useTranslation('common')
   const language = i18n.i18n?.language
-  const { jobs, cities } = props
+  const { jobs, cities, email } = props
   const [visible, setVisible] = React.useState(false)
   const [detailJob, setDetailJob] = React.useState<JobItem>()
 
@@ -98,10 +99,23 @@ const JobList: React.FC<JobProps> = props => {
                 </div>
                 <div className="location">
                   <div className="mb-4 text-lg font-medium text-text_color_1">Work Location</div>
-                  <div className="my-2 text-base font-medium location text-text-color-1">
+                  <div className="my-2 text-base font-medium location text-text_color_1_supplement">
                     {getLocation(get(detailJob, 'cities'))}
                   </div>
                 </div>
+                <div className="py-5 mt-4 border-t email border-line-color">
+                  <div className="mb-4 text-lg font-medium text-text_color_1">Please send your resume to:</div>
+                  <a
+                    href={`mailto:[email protected]?subject=apply - ${get(
+                      detailJob,
+                      `title.${language}`,
+                      get(detailJob, 'title')
+                    )}`}
+                    className="my-2 text-lg font-medium location text-brand_color hover:text-brand_color"
+                  >
+                    {email}
+                  </a>
+                </div>
               </div>
             </div>
           </div>

hooks/use-jobs.ts

@@ -29,9 +29,11 @@ export interface CityItem {
 }
 let jobsState: JobItem[] = []
 const filterSite = 'whale'
+const DefaultEmail = '[email protected]'
 export function useJobs() {
   const [jobs, setJobs] = useSafeState<JobItem[]>(jobsState)
   const [cities, setCities] = useSafeState<CityItem[]>([])
+  const [email, setEmail] = useSafeState<string>(DefaultEmail)
 
   useEffect(() => {
     if (!!jobsState.length) return
@@ -45,10 +47,11 @@ export function useJobs() {
     if (_jobConfig) {
       const whaleJobs = get(_jobConfig, 'jobs', []).filter((job: JobItem) => job.site === filterSite)
       setCities(get(_jobConfig, 'cities', []))
+      setEmail(get(_jobConfig, `emails.${filterSite}`, DefaultEmail))
       setJobs(whaleJobs)
       jobsState = whaleJobs
     }
   }
 
-  return [jobs, cities, setJobs] as const
+  return [jobs, cities, email, setJobs] as const
 }

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --port=3003",
-    "dev:prod": "PROXY=prod next dev --port=3003",
+    "dev": "next dev --port=3002",
+    "dev:prod": "PROXY=prod next dev --port=3002",
     "build": "next build && next export && yarn normalize-asset-path",
     "normalize-asset-path": "node ./normalize-asset-path",
     "start": "next start",

pages/[locale]/jobs/index.tsx

@@ -21,7 +21,7 @@ export const getStaticProps = async (ctx: any) => ({
 })
 
 const Jobs: React.FC = () => {
-  const [jobs, cities] = useJobs()
+  const [jobs, cities, email] = useJobs()
   const seoI18n = useTranslation(['seo'])
   const i18n = useTranslation('common')
   return (
@@ -30,7 +30,7 @@ const Jobs: React.FC = () => {
       <JobBanner />
       <div className="py-5 job-wrapper main-container">
         <div className="main-content-width">
-          <JobList jobs={jobs} cities={cities} />
+          <JobList jobs={jobs} cities={cities} email={email} />
         </div>
       </div>
     </Layout>