https://dev.kronoz.win/r/marzneshin.git
| 1 |
bf7c131 |
Mardin |
2y ago |
import { Badge, Text } from '@chakra-ui/react'; |
| 2 |
a47eb4c |
Dawsh |
2y ago |
|
| 3 |
5bb2712 |
Mardin |
2y ago |
import { statusColors } from 'constants/Settings'; |
| 4 |
bf7c131 |
Mardin |
2y ago |
import { FC } from 'react'; |
| 5 |
bf7c131 |
Mardin |
2y ago |
import { useTranslation } from 'react-i18next'; |
| 6 |
89f8f93 |
Mardin |
2y ago |
import { Status as StatusType } from 'types'; |
| 7 |
bf7c131 |
Mardin |
2y ago |
import { relativeExpiryDate } from 'utils/dateFormatter'; |
| 8 |
a47eb4c |
Dawsh |
2y ago |
|
| 9 |
5bb2712 |
Mardin |
2y ago |
type StatusProps = { |
| 10 |
a47eb4c |
Dawsh |
2y ago |
expiryDate?: number | null; |
| 11 |
5bb2712 |
Mardin |
2y ago |
status: StatusType; |
| 12 |
a47eb4c |
Dawsh |
2y ago |
compact?: boolean; |
| 13 |
a47eb4c |
Dawsh |
2y ago |
showDetail?: boolean; |
| 14 |
a47eb4c |
Dawsh |
2y ago |
extraText?: string | null; |
| 15 |
a47eb4c |
Dawsh |
2y ago |
}; |
| 16 |
5bb2712 |
Mardin |
2y ago |
export const StatusBadge: FC<StatusProps> = ({ |
| 17 |
a47eb4c |
Dawsh |
2y ago |
expiryDate, |
| 18 |
5bb2712 |
Mardin |
2y ago |
status, |
| 19 |
a47eb4c |
Dawsh |
2y ago |
compact = false, |
| 20 |
a47eb4c |
Dawsh |
2y ago |
showDetail = true, |
| 21 |
a47eb4c |
Dawsh |
2y ago |
extraText, |
| 22 |
a47eb4c |
Dawsh |
2y ago |
}) => { |
| 23 |
a47eb4c |
Dawsh |
2y ago |
const { t } = useTranslation(); |
| 24 |
a47eb4c |
Dawsh |
2y ago |
const dateInfo = relativeExpiryDate(expiryDate); |
| 25 |
5bb2712 |
Mardin |
2y ago |
const Icon = statusColors[status].icon; |
| 26 |
a47eb4c |
Dawsh |
2y ago |
return ( |
| 27 |
a47eb4c |
Dawsh |
2y ago |
<> |
| 28 |
a47eb4c |
Dawsh |
2y ago |
<Badge |
| 29 |
5bb2712 |
Mardin |
2y ago |
colorScheme={statusColors[status].statusColor} |
| 30 |
a47eb4c |
Dawsh |
2y ago |
rounded="full" |
| 31 |
a47eb4c |
Dawsh |
2y ago |
display="inline-flex" |
| 32 |
a47eb4c |
Dawsh |
2y ago |
px={3} |
| 33 |
a47eb4c |
Dawsh |
2y ago |
py={1} |
| 34 |
a47eb4c |
Dawsh |
2y ago |
columnGap={compact ? 1 : 2} |
| 35 |
a47eb4c |
Dawsh |
2y ago |
alignItems="center" |
| 36 |
a47eb4c |
Dawsh |
2y ago |
> |
| 37 |
a47eb4c |
Dawsh |
2y ago |
<Icon w={compact ? 3 : 4} /> |
| 38 |
a47eb4c |
Dawsh |
2y ago |
{showDetail && ( |
| 39 |
a47eb4c |
Dawsh |
2y ago |
<Text |
| 40 |
a47eb4c |
Dawsh |
2y ago |
textTransform="capitalize" |
| 41 |
bf7c131 |
Mardin |
2y ago |
fontSize={compact ? '.7rem' : '.875rem'} |
| 42 |
bf7c131 |
Mardin |
2y ago |
lineHeight={compact ? '1rem' : '1.25rem'} |
| 43 |
a47eb4c |
Dawsh |
2y ago |
fontWeight="medium" |
| 44 |
a47eb4c |
Dawsh |
2y ago |
letterSpacing="tighter" |
| 45 |
a47eb4c |
Dawsh |
2y ago |
> |
| 46 |
5bb2712 |
Mardin |
2y ago |
{status} |
| 47 |
a47eb4c |
Dawsh |
2y ago |
{extraText && `: ${extraText}`} |
| 48 |
a47eb4c |
Dawsh |
2y ago |
</Text> |
| 49 |
a47eb4c |
Dawsh |
2y ago |
)} |
| 50 |
a47eb4c |
Dawsh |
2y ago |
</Badge> |
| 51 |
a47eb4c |
Dawsh |
2y ago |
{showDetail && expiryDate && ( |
| 52 |
a47eb4c |
Dawsh |
2y ago |
<Text |
| 53 |
a47eb4c |
Dawsh |
2y ago |
display="inline-block" |
| 54 |
a47eb4c |
Dawsh |
2y ago |
fontSize="xs" |
| 55 |
a47eb4c |
Dawsh |
2y ago |
fontWeight="medium" |
| 56 |
a47eb4c |
Dawsh |
2y ago |
ml="2" |
| 57 |
a47eb4c |
Dawsh |
2y ago |
color="gray.600" |
| 58 |
a47eb4c |
Dawsh |
2y ago |
_dark={{ |
| 59 |
bf7c131 |
Mardin |
2y ago |
color: 'gray.400', |
| 60 |
a47eb4c |
Dawsh |
2y ago |
}} |
| 61 |
a47eb4c |
Dawsh |
2y ago |
> |
| 62 |
a47eb4c |
Dawsh |
2y ago |
{t(dateInfo.status, { time: dateInfo.time })} |
| 63 |
a47eb4c |
Dawsh |
2y ago |
</Text> |
| 64 |
a47eb4c |
Dawsh |
2y ago |
)} |
| 65 |
a47eb4c |
Dawsh |
2y ago |
</> |
| 66 |
a47eb4c |
Dawsh |
2y ago |
); |
| 67 |
a47eb4c |
Dawsh |
2y ago |
}; |