chore: heygermany customer project

apps/website/components/jobs/results/DocumentsChecklist.tsx

@@ -0,0 +1,99 @@
+import {
+  Stack,
+  Text,
+  List,
+  Divider,
+  Anchor,
+  Card,
+  Title,
+} from '@pikku/mantine/core'
+import { useI18n } from '@/context/i18n-provider'
+import { mList } from '@/i18n/messages'
+import { asI18n } from '@pikku/react'
+
+interface DocumentsChecklistProps {
+  openGetHelpDrawer: () => void
+}
+
+export default function DocumentsChecklist({
+  openGetHelpDrawer,
+}: DocumentsChecklistProps) {
+  const t = useI18n()
+
+  return (
+    <Stack gap="lg" mt="md">
+      <Text lineBreaks>{t('jobs.documentschecklist.intro.part1')}</Text>
+      <Text lineBreaks>{t('jobs.documentschecklist.intro.part2')}</Text>
+      <Card withBorder padding="md" radius="sm">
+        <Text size="sm">
+          {t('jobs.documentschecklist.intro.help')}
+          <Anchor
+            c="primary"
+            fw={700}
+            td="underline"
+            onClick={() => {
+              openGetHelpDrawer()
+            }}
+          >
+            {asI18n('here')}
+          </Anchor>
+        </Text>
+      </Card>
+
+      <Divider />
+      <Title order={4}>
+        {t('jobs.documentschecklist.submitoriginal.title')}
+      </Title>
+      <List withPadding spacing="xs">
+        {mList('jobs.documentschecklist.submitoriginal.items').map(
+          (item, idx) => (
+            <List.Item key={'original-' + idx}>{item}</List.Item>
+          )
+        )}
+      </List>
+
+      <Divider />
+      <Title order={4}>{t('jobs.documentschecklist.submitcopies.title')}</Title>
+      <List withPadding spacing="xs">
+        {mList('jobs.documentschecklist.submitcopies.items').map(
+          (item, idx) => (
+            <List.Item key={'copy-' + idx}>{item}</List.Item>
+          )
+        )}
+      </List>
+
+      <Card withBorder padding="md" radius="sm">
+        <Text size="sm" lineBreaks>{t('jobs.documentschecklist.translationinfo')}</Text>
+      </Card>
+
+      <Divider />
+      <Title order={4}>{t('jobs.documentschecklist.advice.title')}</Title>
+      <Text lineBreaks>{t('jobs.documentschecklist.advice.part1')}</Text>
+      <Text lineBreaks>{t('jobs.documentschecklist.advice.part2')}</Text>
+
+      <Divider />
+      <Title order={4}>{t('jobs.documentschecklist.contact.title')}</Title>
+      <Text>
+        <strong>{asI18n('Address:')}</strong>
+        <br />
+        {t('jobs.documentschecklist.contact.address')}
+      </Text>
+      <Text>
+        <strong>{asI18n('Email:')}</strong>{asI18n(' ')}
+        <Anchor
+          href={`mailto:${t('jobs.documentschecklist.contact.email')}`}
+          c="primary"
+          fw={700}
+        >
+          {t('jobs.documentschecklist.contact.email')}
+        </Anchor>
+      </Text>
+      <Text>
+        <strong>{asI18n('Phone:')}</strong>{asI18n(' ')}{t('jobs.documentschecklist.contact.phone')}
+      </Text>
+      <Text>
+        <em>{t('jobs.documentschecklist.contact.hours')}</em>
+      </Text>
+    </Stack>
+  )
+}