chore: heygermany customer project

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

@@ -0,0 +1,82 @@
+'use client'
+
+import {
+  Paper,
+  Text,
+  Flex,
+  ThemeIcon,
+  rem,
+  useMantineTheme,
+  Stack,
+} from '@pikku/mantine/core'
+import { useI18n } from '@/context/i18n-provider'
+import { asI18n } from '@pikku/react'
+import {
+  IconCircleCheck,
+  IconExclamationCircle,
+  IconClock,
+  IconInfoCircle,
+  IconCircle,
+} from '@tabler/icons-react'
+
+interface QualificationSectionStatusCardProps {
+  label: string
+  status: 'completed' | 'in-progress' | 'required' | 'optional'
+  color: string
+  icon: React.ReactNode
+}
+
+const getStatusIcon = (
+  status: QualificationSectionStatusCardProps['status'],
+  color: string
+) => {
+  const iconProps = { size: 20, color }
+  switch (status) {
+    case 'completed':
+      return <IconCircleCheck {...iconProps} />
+    case 'required':
+      return <IconExclamationCircle {...iconProps} />
+    case 'in-progress':
+      return <IconClock {...iconProps} />
+    case 'optional':
+      return <IconInfoCircle {...iconProps} />
+    default:
+      return <IconCircle {...iconProps} />
+  }
+}
+
+export const QualificationSectionStatusCard: React.FC<
+  QualificationSectionStatusCardProps
+> = ({ label, status, color, icon }) => {
+  const theme = useMantineTheme()
+  const t = useI18n()
+  return (
+    <Paper withBorder shadow="xs" p="md" radius="md" mb="xl" w={rem(220)}>
+      <Stack>
+        <Flex justify='space-between'>
+          <Text size="lg" c="dimmed" mb="lg">
+            {asI18n(label.split(' ')[0] ?? '')}
+          </Text>
+          <ThemeIcon
+            size="lg"
+            radius="xl"
+            variant="outline"
+            bg={color}
+            color='white'
+            p={4}
+          >
+            {icon}
+          </ThemeIcon>
+        </Flex>
+        <Flex align="center">
+          <ThemeIcon variant="transparent" size="md" radius="md">
+            {getStatusIcon(status, `${theme.colors.gray[7]}`)}
+          </ThemeIcon>
+          <Text size="xl" fw={600}>
+            {t(`enums.documentstatus.${status}` as any)}
+          </Text>
+        </Flex>
+      </Stack>
+    </Paper>
+  )
+}