37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { Badge, Box, Icon, Stack, Text } from '@chakra-ui/react';
|
|
import { WorkingProgressStatus } from '@generated/types';
|
|
import {
|
|
assertUnreachable,
|
|
toBgColorByProgressStatus,
|
|
toWorkingProgressStatusLabel
|
|
} from '../helpers';
|
|
|
|
export function WorkingProgressStatusBadge({
|
|
progressStatus
|
|
}: {
|
|
progressStatus: WorkingProgressStatus;
|
|
}) {
|
|
return (
|
|
<Box flex={1} justifyContent="center" alignItems="center">
|
|
<Badge
|
|
variant="solid"
|
|
backgroundColor={toBgColorByProgressStatus(progressStatus)}
|
|
size={'lg'}
|
|
>
|
|
<Stack direction="row">
|
|
<Icon fontSize="xl">
|
|
<i className={`${toWorkingProgressStatusIcon(progressStatus)}`} />
|
|
</Icon>
|
|
<Text>{toWorkingProgressStatusLabel(progressStatus)}</Text>
|
|
</Stack>
|
|
</Badge>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
function toWorkingProgressStatusIcon(value: WorkingProgressStatus): string {
|
|
if (value === WorkingProgressStatus.InProgress) return 'nf nf-fa-clock';
|
|
if (value === WorkingProgressStatus.Frozen) return 'nf nf-fa-snowflake';
|
|
if (value === WorkingProgressStatus.Finished) return 'nf nf-fa-circle_check';
|
|
assertUnreachable(value);
|
|
}
|