1  import { CheckCircleIcon, QuestionMarkCircleIcon, XCircleIcon } from '@heroicons/react/solid';
 2  import { Box, BoxProps, Typography, TypographyProps, useTheme } from '@mui/material';
 3  import { ReactNode } from 'react';
 4  
 5  interface CheckBadgeProps extends BoxProps {
 6    checked?: boolean;
 7    text: ReactNode;
 8    variant?: TypographyProps['variant'];
 9    loading?: boolean;
10  }
11  
12  export function CheckBadge({
13    checked,
14    text,
15    variant = 'subheader2',
16    loading,
17    ...rest
18  }: CheckBadgeProps) {
19    const { palette } = useTheme();
20    return (
21      <Box {...rest} sx={{ display: 'flex', alignItems: 'center', ...rest.sx }}>
22        <Typography variant={variant} component="span" sx={{ mr: 1 }}>
23          {text}
24        </Typography>
25        {loading ? (
26          <QuestionMarkCircleIcon height={16} />
27        ) : checked ? (
28          <CheckCircleIcon height={16} color={palette.success.main} />
29        ) : (
30          <XCircleIcon height={16} color={palette.error.main} />
31        )}
32      </Box>
33    );
34  }