81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
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>
|
|
)
|
|
}
|