66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import {
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
List,
|
|
Anchor,
|
|
Table,
|
|
Divider,
|
|
} from '@pikku/mantine/core'
|
|
import { useI18n } from '@/context/i18n-provider'
|
|
import { asI18n } from '@pikku/react'
|
|
import { paidCourseProviders as providers } from '@/lib/content/paid-course-providers'
|
|
import { freeCourseLinks as freeLinks } from '@/lib/content/free-course-links'
|
|
|
|
export default function GermanLanguageTips() {
|
|
const t = useI18n()
|
|
|
|
return (
|
|
<Stack gap="md" mt="md">
|
|
<Text lineBreaks>{t('jobs.germanlanguagetips.tip')}</Text>
|
|
|
|
<Title order={3}>{t('jobs.germanlanguagetips.freecourses.title')}</Title>
|
|
<List>
|
|
{freeLinks.map((link, idx) => (
|
|
<List.Item key={idx}>
|
|
<Anchor href={link.url} target="_blank" rel="noopener noreferrer">
|
|
{asI18n(link.name)}
|
|
</Anchor>
|
|
</List.Item>
|
|
))}
|
|
</List>
|
|
|
|
<Text lineBreaks>{t('jobs.germanlanguagetips.b1congrats')}</Text>
|
|
<Text lineBreaks>{t('jobs.germanlanguagetips.b2requirement')}</Text>
|
|
|
|
<Divider />
|
|
|
|
<Title order={3}>{t('jobs.germanlanguagetips.paidcourses.title')}</Title>
|
|
<Table withTableBorder withColumnBorders striped highlightOnHover>
|
|
<Table.Thead>
|
|
<Table.Tr>
|
|
<Table.Th>Provider</Table.Th>
|
|
<Table.Th>Levels</Table.Th>
|
|
<Table.Th>Format</Table.Th>
|
|
</Table.Tr>
|
|
</Table.Thead>
|
|
<Table.Tbody>
|
|
{providers.map((course, idx) => (
|
|
<Table.Tr key={idx}>
|
|
<Table.Td>{course.provider}</Table.Td>
|
|
<Table.Td>{course.levels}</Table.Td>
|
|
<Table.Td>{course.format}</Table.Td>
|
|
</Table.Tr>
|
|
))}
|
|
</Table.Tbody>
|
|
</Table>
|
|
<Text lineBreaks>{t('jobs.germanlanguagetips.paidcourses.fundingintro')}</Text>
|
|
|
|
{/* TODO(i18n): the `jobs.germanlanguagetips.fundingoptions` source cell is
|
|
corrupt JSON in the Google Sheet (truncated, unescaped quotes), so this
|
|
section has rendered empty in all locales. Restore as a TS content
|
|
module + messages once the source content is recovered. */}
|
|
</Stack>
|
|
)
|
|
}
|