Files
mip-website/pages/recruitment/item/[category_id].js
T
2023-01-04 08:47:19 +03:30

109 lines
4.8 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import React from 'react';
import Image from "next/image";
import Link from "next/link";
import {FiUsers, FiArrowLeft} from 'react-icons/fi'
import {
MDBBtn,
MDBCard,
MDBCardBody,
MDBCardText,
MDBCardTitle,
MDBContainer,
MDBIcon,
MDBTypography
} from "mdb-react-ui-kit";
import {Box, Divider, SimpleGrid} from "@chakra-ui/react";
import AppContainer from "../../appContainer";
import {useRouter} from "next/router";
import axios from "axios";
const Recruitment = (jobs) => {
console.log(jobs)
const Parallax = ({ quality }) => {
return `../../resource/parallax/33012321.jpg`;
}
const router = useRouter();
const {category_id} = router.query
return (
<div>
<AppContainer title={'فرصت های شغلی بیمارستان مهر ایرانیان پرند'}>
<div className="parallax-container">
<div className={'flex flex-column'}>
<div className={'mb-5'}>
<h2 className={'center-align bk-med text-white header_back service-text dana font-weight-bold'}> فرصت های شغلی بیمارستان مهر ایرانیان پرند </h2>
</div>
<br />
<br />
<div className={'mt-2'}>
<br />
<br />
<p className={'center-align bk-light RTL text-white mt-5 header_back service-text dana font-weight-bold'}>فرصت‌هایی برای اینکه رویاهای خودتان را در کنار ما بسازید.</p>
</div>
</div>
<Image
loader={Parallax}
src="Parallax.png"
className={'responsive-img shadow-5'}
alt={category_id}
width={3000}
height={1300}
/>
</div>
<MDBContainer className={'mt-5'}>
<div className={'bk-med flex justify-content-center align-items-center flex-col'}>
<MDBTypography className={'bk-md text-primary-teal font-weight-bold'} variant={'h3'}>{jobs.jobs.name.title} </MDBTypography>
<MDBTypography className={'bk-light text-primary-teal mt-2'}>شغل مورد علاقه خود را انتخاب کنید </MDBTypography>
</div>
<Divider />
<SimpleGrid dir={'rtl'} columns={[1, 1, 3]} spacing={3}>
{jobs.jobs.data && jobs.jobs.data.map((item) => (
<Box key={item.id}>
<Link href={`/recruitment/item/request/${item.id}`}>
<MDBCard className={'jobs-item-card rounded-6'}>
<MDBCardBody className={'flex align-items-center lg:flex-row md:flex-col sm:flex-col justify-content-between'}>
<div>
<MDBCardTitle title={item.title} className={'bk-med text-summery-2 mt-2 right'}>{item.title} </MDBCardTitle>
</div>
<div>
<Link href={`/recruitment/item/request/${item.id}`}>
<MDBBtn rounded size={'sm'} className={'mt-2 flex align-items-center bk-light bg-primary-teal'}>
درخواست همکاری
<FiArrowLeft className={'ml-2'} />
</MDBBtn>
</Link>
</div>
</MDBCardBody>
</MDBCard>
</Link>
</Box>
))}
</SimpleGrid>
</MDBContainer>
<br />
<br />
<br />
<br />
</AppContainer>
</div>
);
};
export async function getServerSideProps(ctx) {
// Fetch data from external API
const {query} = ctx
const res = await axios.get(`https://mehriranianco.ir/api/public/job/${query.category_id}`).then((res) => {
return res.data
}).catch((err) => {
console.log(err)
});
const jobs = await res
// Pass data to the page via props
return { props: { jobs } }
}
export default Recruitment;