140 lines
4.2 KiB
TypeScript
140 lines
4.2 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
Box,
|
|
Container,
|
|
Grid,
|
|
Stack,
|
|
Text,
|
|
Group,
|
|
Button,
|
|
rem,
|
|
Drawer,
|
|
Alert,
|
|
} from '@pikku/mantine/core'
|
|
import { IconInfoCircle } from '@tabler/icons-react'
|
|
import { useI18n } from '@/context/i18n-provider'
|
|
import { asI18n } from '@pikku/react'
|
|
import GetHelp from './GetHelp'
|
|
import ApplicantProfile from './ApplicantProfile'
|
|
import ConnectWithEmployers from './ConnectWithEmployers'
|
|
|
|
interface CTASectionProps {
|
|
joinTalentPool: boolean
|
|
publicMode?: boolean
|
|
}
|
|
|
|
export const CTASection: React.FunctionComponent<CTASectionProps> = ({
|
|
joinTalentPool,
|
|
publicMode = false,
|
|
}) => {
|
|
const t = useI18n()
|
|
const [drawerOpened, setDrawerOpened] = useState(false)
|
|
const [drawerTitle, setDrawerTitle] = useState('')
|
|
const [drawerContent, setDrawerContent] = useState<'getHelp' | 'connect'>('connect')
|
|
|
|
const openDrawer = (contentType: 'getHelp' | 'connect', title: string) => {
|
|
setDrawerTitle(title)
|
|
setDrawerContent(contentType)
|
|
setDrawerOpened(true)
|
|
}
|
|
|
|
const renderDrawerContent = () => {
|
|
switch (drawerContent) {
|
|
case 'getHelp':
|
|
return <GetHelp />
|
|
case 'connect':
|
|
if (publicMode) {
|
|
return <ConnectWithEmployers />
|
|
}
|
|
return (
|
|
<Stack gap="md">
|
|
{!joinTalentPool && (
|
|
<Alert variant="light" color="blue" icon={<IconInfoCircle />}>
|
|
<Text size="sm" fw={500}>
|
|
{t('jobs.improveyourprofile.optin.title')}
|
|
</Text>
|
|
<Text size="sm" mt="xs">
|
|
{t('jobs.improveyourprofile.optin.description')}
|
|
</Text>
|
|
</Alert>
|
|
)}
|
|
<ApplicantProfile />
|
|
</Stack>
|
|
)
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Box bg="white" py="xl">
|
|
<Container size="xl" p={0}>
|
|
<Grid gutter={0}>
|
|
<Grid.Col span={{ base: 12, lg: 6 }}>
|
|
<Stack gap="xl" p="xl" me={rem(40)}>
|
|
<Stack gap="xs">
|
|
<Text size="xxxl" fw={700} lh={1.2}>
|
|
{t('jobs.ctasection.ready.prefix')}
|
|
</Text>
|
|
<Text size="xxxl" fw={700} c="primary" lh={1.2}>
|
|
{t('jobs.ctasection.ready.suffix')}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Text size="xl" maw={rem(500)}>
|
|
{t('jobs.ctasection.description')}
|
|
</Text>
|
|
|
|
<Group>
|
|
<Button
|
|
size="md"
|
|
color="primary"
|
|
onClick={() => openDrawer('connect', t('jobs.ctasection.buttons.connect'))}
|
|
>
|
|
{t('jobs.ctasection.buttons.connect')}
|
|
</Button>
|
|
<Button
|
|
size="md"
|
|
variant="outline"
|
|
color="gray"
|
|
onClick={() => openDrawer('getHelp', t('jobs.ctasection.buttons.contact'))}
|
|
>
|
|
{t('jobs.ctasection.buttons.contact')}
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Grid.Col>
|
|
|
|
<Grid.Col span={{ base: 12, lg: 6 }}>
|
|
<Box pos="relative" h={{ base: '300px', lg: '100%' }}>
|
|
<img
|
|
src="https://media.istockphoto.com/id/998313080/photo/smiling-medical-team-standing-together-outside-a-hospital.jpg?s=612x612&w=0&k=20&c=fXzbjAoStQ_8jTM4TQxbHBEjhETI3vq5_7d_JL19eCA="
|
|
alt="Smiling medical team standing together outside a hospital"
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
objectFit: 'cover',
|
|
objectPosition: 'center',
|
|
clipPath: 'polygon(12% 0, 100% 0%, 100% 100%, 0 100%)',
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
|
|
<Drawer
|
|
opened={drawerOpened}
|
|
onClose={() => setDrawerOpened(false)}
|
|
title={asI18n(drawerTitle)}
|
|
size="lg"
|
|
position="right"
|
|
>
|
|
{renderDrawerContent()}
|
|
</Drawer>
|
|
</>
|
|
)
|
|
}
|