-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
244 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import React from 'react' | ||
|
||
const bg = 'https://assets.lbctrl.com/uploads/66944006-30cf-464c-b535-ba4c2246b400/whale-job.png' | ||
const JobBanner: React.FC = () => { | ||
return ( | ||
<section className="relative flex flex-col items-start justify-center h-44 bg-bg_color_2"> | ||
<div className="w-full main-container"> | ||
<div className="text-4xl font-semibold main-content-width">Join Us</div> | ||
</div> | ||
{/* <img src={bg} alt="job-bg" className="absolute top-0 bottom-0 right-0" /> */} | ||
</section> | ||
) | ||
} | ||
|
||
export default JobBanner |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
import { JobItem, CityItem } from '@/hooks/use-jobs' | ||
import React from 'react' | ||
import get from 'lodash/get' | ||
import { useTranslation } from 'next-i18next' | ||
import { FullMask } from '@/components/popup' | ||
import Icon from '@/components/icon' | ||
import style from './index.module.scss' | ||
import { Modal } from 'antd' | ||
|
||
interface JobProps { | ||
jobs: JobItem[] | ||
cities: CityItem[] | ||
} | ||
const JobList: React.FC<JobProps> = props => { | ||
const i18n = useTranslation('common') | ||
const language = i18n.i18n?.language | ||
const { jobs, cities } = props | ||
const [visible, setVisible] = React.useState(false) | ||
const [detailJob, setDetailJob] = React.useState() | ||
|
||
const getLocation = (_cities: string) => { | ||
const city = _cities | ||
.split(',') | ||
.map(city => { | ||
const cityItem = cities.find(c => c.key === city) | ||
return get(cityItem, `address.${language}`, get(cityItem, 'address')) | ||
}) | ||
.filter(Boolean) | ||
|
||
console.log('🚀 ~ getLocation ~ city:', city) | ||
return city.join(' ') | ||
} | ||
|
||
const handleJob = job => { | ||
setDetailJob(job) | ||
setVisible(true) | ||
} | ||
return ( | ||
<section className="job-list"> | ||
{jobs.map(job => { | ||
return ( | ||
<div | ||
className="px-4 py-5 -mx-4 rounded-lg cursor-pointer job-item hover:bg-bg_color_2" | ||
key={job.id} | ||
onClick={() => handleJob(job)} | ||
> | ||
<div className="text-xl font-medium title text-text-color-1"> | ||
{get(job, `title.${language}`, get(job, 'title'))} | ||
</div> | ||
<div className="my-2 text-base font-medium location text-text-color-1"> | ||
{getLocation(get(job, 'cities'))} | ||
</div> | ||
<div className="text-sm font-normal whitespace-pre-wrap brief text-text_color_1_supplement line-clamp-2"> | ||
{get(job, `jobResponsibility.${language}`, get(job, 'jobResponsibility'))} | ||
</div> | ||
</div> | ||
) | ||
})} | ||
{visible && ( | ||
<Modal | ||
centered | ||
width={560} | ||
open={true} | ||
footer={null} | ||
closable={false} | ||
maskClosable | ||
onCancel={() => setVisible(false)} | ||
getContainer={'#__next'} | ||
bodyStyle={{ padding: 0 }} | ||
className={style['job-detail-modal']} | ||
maskStyle={{ backgroundColor: 'rgba(0,0,0,.5)' }} | ||
> | ||
<div className="relative p-5 pt-0 rounded-xl"> | ||
<Icon | ||
type="close" | ||
className="absolute right-4 top-3 cursor-pointer text-[26px] text-[#ccc] hover:text-text-color-1" | ||
onClick={() => setVisible(false)} | ||
></Icon> | ||
<div className="pt-3 pb-4 title"> | ||
<div className="text-xl font-medium title text-text-color-1"> | ||
{get(detailJob, `title.${language}`, get(detailJob, 'title'))} | ||
</div> | ||
</div> | ||
<div className="max-h-[60vh] overflow-auto job-detail"> | ||
<div> | ||
<div className="mb-5 requirement"> | ||
<div className="mb-4 text-lg font-medium text-text_color_1">Job Requirements</div> | ||
<div className="text-sm font-normal leading-6 whitespace-pre-line text-text_color_1_supplement"> | ||
{get(detailJob, `jobRequirements.${language}`, get(detailJob, 'jobRequirements'))} | ||
</div> | ||
</div> | ||
<div className="mb-5 responsibility"> | ||
<div className="mb-4 text-lg font-medium text-text_color_1">Job Responsibilities</div> | ||
<div className="text-sm font-normal leading-6 whitespace-pre-line text-text_color_1_supplement"> | ||
{get(detailJob, `jobResponsibility.${language}`, get(detailJob, 'jobResponsibility'))} | ||
</div> | ||
</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"> | ||
{getLocation(get(detailJob, 'cities'))} | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</Modal> | ||
)} | ||
</section> | ||
) | ||
} | ||
|
||
export default JobList |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
:local(.job-detail-modal) { | ||
.ant-modal-content { | ||
@apply rounded-lg; | ||
.job-detail { | ||
&::-webkit-scrollbar { | ||
@apply hidden; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { useEffect } from 'react' | ||
import { useSafeState } from 'ahooks' | ||
import { getAppConfig } from '@/services' | ||
import get from 'lodash/get' | ||
|
||
/** | ||
* 获取媒体报道 | ||
* @returns ReportItem[] | ||
*/ | ||
interface LocaleItem { | ||
'zh-CN': string | ||
'zh-HK': string | ||
'en': string | ||
} | ||
export interface JobItem { | ||
site: string | ||
city: string | ||
goodImpression: string | ||
id: string | ||
jobRequirements: string | LocaleItem | ||
jobResponsibility: string | LocaleItem | ||
title: string | LocaleItem | ||
} | ||
export interface CityItem { | ||
address: string | ||
key: string | ||
name: string | ||
} | ||
let jobsState: JobItem[] = [] | ||
const filterSite = 'whale' | ||
export function useJobs() { | ||
const [jobs, setJobs] = useSafeState<JobItem[]>(jobsState) | ||
const [cities, setCities] = useSafeState<CityItem[]>([]) | ||
|
||
useEffect(() => { | ||
if (!!jobsState.length) return | ||
fetchJobs() | ||
}, []) | ||
|
||
const fetchJobs = async () => { | ||
const key = 'jobs' | ||
const resp = await getAppConfig([key]) | ||
const _jobConfig = resp?.config?.[key] | ||
if (_jobConfig) { | ||
const whaleJobs = get(_jobConfig, 'jobs', []).filter((job: JobItem) => job.site === filterSite) | ||
setCities(get(_jobConfig, 'cities', [])) | ||
setJobs(whaleJobs) | ||
jobsState = whaleJobs | ||
} | ||
} | ||
|
||
return [jobs, cities, setJobs] as const | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import React from 'react' | ||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations' | ||
import { useTranslation } from 'next-i18next' | ||
import { i18nPaths } from '@/utils/i18n-paths' | ||
import i18nextConfig from '@/next-i18next.config' | ||
import { useJobs } from '@/hooks/use-jobs' | ||
import { SEOMeta } from '@/utils/seo' | ||
import { getAppConfig } from '@/services' | ||
import { Layout, PageLayout } from '@/features/common/page-layout' | ||
import JobBanner from '@/features/jobs/Banner' | ||
import JobList from '@/features/jobs/List' | ||
|
||
export const getStaticPaths = () => ({ | ||
fallback: false, | ||
paths: i18nPaths(), | ||
}) | ||
export const getStaticProps = async (ctx: any) => ({ | ||
props: { | ||
...(await serverSideTranslations(ctx?.params?.locale, ['common', 'seo'], i18nextConfig)), | ||
}, | ||
}) | ||
|
||
const Jobs: React.FC = () => { | ||
const [jobs, cities] = useJobs() | ||
const seoI18n = useTranslation(['seo']) | ||
const i18n = useTranslation('common') | ||
return ( | ||
<Layout> | ||
<SEOMeta title={seoI18n.t('about.title')} description={seoI18n.t('about.description')} /> | ||
<JobBanner /> | ||
<div className="py-5 job-wrapper main-container"> | ||
<div className="main-content-width"> | ||
<JobList jobs={jobs} cities={cities} /> | ||
</div> | ||
</div> | ||
</Layout> | ||
) | ||
} | ||
|
||
export default Jobs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters