352 lines
16 KiB
TypeScript
352 lines
16 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import PortableText from 'react-portable-text'
|
|
import axios from 'axios'
|
|
import { NextSeo } from 'next-seo'
|
|
import { format } from 'date-fns'
|
|
import { Fade, Slide } from 'react-awesome-reveal'
|
|
import {
|
|
IoCalendarClearOutline,
|
|
IoBriefcaseOutline,
|
|
IoPaperPlaneOutline,
|
|
} from 'react-icons/io5'
|
|
|
|
import HeaderImage from '../components/Header/HeaderImage'
|
|
import Container from 'components/BlogContainer'
|
|
import CTA from 'components/Cta'
|
|
import Layout from 'components/Layout'
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogHeader,
|
|
DialogBody,
|
|
DialogFooter,
|
|
} from '@material-tailwind/react'
|
|
import Link from 'next/link'
|
|
|
|
export interface CareerProps {
|
|
preview?: boolean
|
|
loading?: boolean
|
|
}
|
|
|
|
export default function Career(props) {
|
|
//modal window
|
|
const [open, setOpen] = React.useState(false)
|
|
const handleOpen = () => setOpen(!open)
|
|
|
|
//console.log(props)
|
|
const { loading, preview } = props
|
|
const [dataHeader, setDataHeader] = useState({})
|
|
const [dataCareer, dataContentSet] = useState([])
|
|
|
|
useEffect(() => {
|
|
const contentLoad = async function () {
|
|
let data = await axios.get('/api/career')
|
|
let dt = data.data
|
|
let hD = {
|
|
title: dt.title,
|
|
subTitle: dt.subtitle,
|
|
imageUrl: 'https://cdn.sanity.io/' + dt.coverImage,
|
|
}
|
|
|
|
//console.log('datanya: ', data)
|
|
|
|
let ev = dt.career.map((x, i) => {
|
|
let r = x
|
|
let dt = []
|
|
;(function deep(v, l) {
|
|
for (let i = 0; i < l; i++) {
|
|
Object.keys(v[i]).forEach(function (f) {
|
|
if (f == 'children') {
|
|
deep(v[i][f], v[i][f].length)
|
|
} else if (f == 'text') {
|
|
dt.push(v[i][f])
|
|
}
|
|
})
|
|
}
|
|
})(r.content, r.content.length)
|
|
r.text = dt.join(' ')
|
|
return r
|
|
})
|
|
|
|
//console.log(ev)
|
|
setDataHeader(hD)
|
|
dataContentSet(ev)
|
|
}
|
|
contentLoad()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<NextSeo
|
|
title="Career & Opporturnity - GWK Cultural Park Bali"
|
|
description="Career & Opportunity at Garuda Wisnu Kencana "
|
|
additionalLinkTags={[
|
|
{
|
|
rel: 'icon',
|
|
href: '../favicon/favicon.ico',
|
|
},
|
|
]}
|
|
openGraph={{
|
|
title: 'Career & Opportunity - GWK Cultural Park Bali',
|
|
description: 'Career & Opportinity at Garuda Wisnu Kencana ',
|
|
url: 'https://www.gwkbali.com/career',
|
|
type: 'article',
|
|
article: {
|
|
section: 'Career & Opportunity',
|
|
},
|
|
images: [
|
|
{
|
|
url: '/images/857e740d071d5f8b4d54934905ee671445f6670d-3751x2501.jpg',
|
|
//url: 'https://cdn.sanity.io/images/helyis1v/production/857e740d071d5f8b4d54934905ee671445f6670d-3751x2501.jpg',
|
|
width: 850,
|
|
height: 650,
|
|
alt: 'Career & Opportunity - GWK Cultural Park Bali',
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
<div>
|
|
<Layout loading={loading} preview={preview}>
|
|
<HeaderImage dat={dataHeader} />
|
|
|
|
<Container>
|
|
<div className="pt-10 sm:p-0 md:p-10">
|
|
<div className="grid">
|
|
{(function (data) {
|
|
return data.map((df, i) => {
|
|
if (df.title.toLocaleLowerCase().indexOf('other') == -1) {
|
|
var ty = Number(i)
|
|
var pop = ty % 2
|
|
if (pop === 0) {
|
|
return (
|
|
<Fade key={i} duration={1200} delay={300} triggerOnce>
|
|
<div
|
|
key={i}
|
|
className="container mb-20 overflow-hidden rounded-md border bg-stone-50 p-0"
|
|
>
|
|
<div className="row g-0">
|
|
<div
|
|
className="min-h-[400px] sm:col-12 md:col-6"
|
|
style={{
|
|
backgroundImage:
|
|
'url("https://cdn.sanity.io/' +
|
|
df.coverImage +
|
|
'")',
|
|
backgroundSize: 'cover',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: 'center',
|
|
overflow: 'hidden',
|
|
}}
|
|
></div>
|
|
<div className="sm:col-12 md:col-6">
|
|
<div className="pb-5 pl-10 pr-10 pt-10 sm:pb-10 sm:pl-10 sm:pr-10 sm:pt-10">
|
|
<h2 className="heading-h2 mb-5 text-4xl font-semibold leading-tight sm:text-5xl">
|
|
{df.title}
|
|
</h2>
|
|
{/* <div>{parser(df.text)}</div> */}
|
|
<div className="pb-5 text-stone-600">
|
|
<span className="inline-grid grid-cols-3 gap-3">
|
|
<span className="inline-flex items-start">
|
|
<IoCalendarClearOutline />
|
|
<span className="pl-2 font-sans text-sm">
|
|
{format(
|
|
new Date(df.date),
|
|
'dd-MM-yyyy'
|
|
)}
|
|
</span>
|
|
</span>
|
|
<span className="inline-flex items-start">
|
|
<IoBriefcaseOutline />
|
|
<span className="pl-2 font-sans text-sm">
|
|
{df.jobtype}
|
|
</span>
|
|
</span>
|
|
<span className="inline-flex items-start">
|
|
<IoPaperPlaneOutline />
|
|
<span className="pl-2 font-sans text-sm text-yellow-500 hover:text-stone-600">
|
|
<Link
|
|
href={df.jobplatformurl}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
Apply
|
|
</Link>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="text-paragraph jobdesc mb-5 font-sans text-base">
|
|
<PortableText
|
|
content={df.content}
|
|
serializers={{
|
|
normal: ({ children }) => (
|
|
<p className="pb-2">{children}</p>
|
|
),
|
|
strong: ({ children }) => (
|
|
<strong className="font-semibold">
|
|
{children}
|
|
</strong>
|
|
),
|
|
li: ({ children }) => (
|
|
<li className="special-list-item ml-5 list-disc">
|
|
{children}
|
|
</li>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
{/* <Button
|
|
onClick={handleOpen}
|
|
variant="text"
|
|
placeholder={null}
|
|
size='sm'
|
|
>
|
|
More
|
|
</Button> */}
|
|
<Dialog
|
|
open={open}
|
|
handler={handleOpen}
|
|
placeholder={null}
|
|
>
|
|
<DialogHeader
|
|
placeholder={null}
|
|
className="pb-5 pl-10 pr-10 pt-10 font-Inter text-stone-600"
|
|
>
|
|
{df.title}
|
|
</DialogHeader>
|
|
<DialogBody
|
|
placeholder={null}
|
|
className="pb-0 pl-10 pr-10 pt-0 font-Inter text-stone-600"
|
|
>
|
|
{df.content.rendered}
|
|
{/* <img src={df.poster} width={800} height={800} alt='' /> */}
|
|
</DialogBody>
|
|
<DialogFooter placeholder={null}>
|
|
<Button
|
|
variant="gradient"
|
|
color="black"
|
|
onClick={handleOpen}
|
|
placeholder={null}
|
|
>
|
|
<span>Close</span>
|
|
</Button>
|
|
</DialogFooter>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Fade>
|
|
)
|
|
} else {
|
|
return (
|
|
<div
|
|
key={i}
|
|
className="container mb-20 overflow-hidden rounded-md border bg-stone-50 p-0"
|
|
>
|
|
<Fade duration={1200} delay={300} triggerOnce>
|
|
<div className="row g-0">
|
|
<div className="min-h-[400px] sm:col-12 md:col-6">
|
|
<div className="pb-5 pl-10 pr-10 pt-10 sm:pb-10 sm:pl-10 sm:pr-10 sm:pt-10">
|
|
<h2 className="heading-h2 mb-5 text-4xl font-semibold leading-tight sm:text-5xl">
|
|
{df.title}
|
|
</h2>
|
|
<div className="pb-5 text-stone-600">
|
|
<span className="inline-grid grid-cols-3 gap-3">
|
|
{/* <span className="inline-flex items-center">
|
|
<IoNewspaperOutline />
|
|
<span className='pl-2 font-sans text-sm'>Poster</span>
|
|
</span> */}
|
|
<span className="inline-flex items-start">
|
|
<IoCalendarClearOutline />
|
|
<span className="pl-2 font-sans text-sm">
|
|
{format(
|
|
new Date(df.date),
|
|
'dd-MM-yyyy'
|
|
)}
|
|
</span>
|
|
</span>
|
|
<span className="inline-flex items-start">
|
|
<IoBriefcaseOutline />
|
|
<span className="pl-2 font-sans text-sm">
|
|
{df.jobtype}
|
|
</span>
|
|
</span>
|
|
<span className="inline-flex items-start">
|
|
<IoPaperPlaneOutline />
|
|
<span className="pl-2 font-sans text-sm text-yellow-500 hover:text-stone-600">
|
|
<Link
|
|
href={df.jobplatformurl}
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
Apply
|
|
</Link>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div className="text-paragraph mb-5 font-sans text-base">
|
|
<PortableText
|
|
content={df.content}
|
|
serializers={{
|
|
normal: ({ children }) => (
|
|
<p className="pb-2">{children}</p>
|
|
),
|
|
strong: ({ children }) => (
|
|
<strong className="font-semibold">
|
|
{children}
|
|
</strong>
|
|
),
|
|
li: ({ children }) => (
|
|
<li className="special-list-item ml-5 list-disc">
|
|
{children}
|
|
</li>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="col-12 min-h-64 md:col-6"
|
|
style={{
|
|
backgroundImage:
|
|
'url("https://cdn.sanity.io/' +
|
|
df.coverImage +
|
|
'")',
|
|
backgroundSize: 'cover',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: 'center',
|
|
overflow: 'hidden',
|
|
}}
|
|
></div>
|
|
</div>
|
|
</Fade>
|
|
</div>
|
|
)
|
|
}
|
|
} else {
|
|
return (
|
|
<div
|
|
key={i}
|
|
className="mb-20 overflow-hidden rounded p-4 text-center"
|
|
></div>
|
|
)
|
|
}
|
|
})
|
|
})(dataCareer)}
|
|
</div>
|
|
|
|
<CTA key={1} />
|
|
</div>
|
|
</Container>
|
|
</Layout>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|