| 16 | } |
| 17 | |
| 18 | function PracticeHeader({ cardId, progress, collectionId }: PracticeHeaderProps) { |
| 19 | const { t } = useTranslation() |
| 20 | const navigate = useNavigate() |
| 21 | const total = progress.total |
| 22 | |
| 23 | return ( |
| 24 | <VStack w="100%" gap={2} align="stretch"> |
| 25 | <HStack w="100%" justifyContent="space-between" alignItems="center"> |
| 26 | <Text fontSize="sm" color="fg.muted"> |
| 27 | {total === 0 |
| 28 | ? `${t('general.actions.startPracticing')}!` |
| 29 | : `${t('general.words.correct')}: ${progress.correct} | ${t('general.words.incorrect')}: ${progress.incorrect}`} |
| 30 | </Text> |
| 31 | <IconButton |
| 32 | aria-label="Edit card" |
| 33 | size="sm" |
| 34 | variant="ghost" |
| 35 | onClick={() => |
| 36 | navigate({ |
| 37 | to: `/collections/${collectionId}/cards/${cardId}`, |
| 38 | }) |
| 39 | } |
| 40 | _hover={{ |
| 41 | transform: 'scale(1.05)', |
| 42 | bg: 'bg.50', |
| 43 | }} |
| 44 | > |
| 45 | <RiEdit2Fill /> |
| 46 | </IconButton> |
| 47 | </HStack> |
| 48 | {total > 0 && ( |
| 49 | <Box w="100%" h="2" bg="bg.50" borderRadius="full" overflow="hidden"> |
| 50 | <Box |
| 51 | h="100%" |
| 52 | w={`${((progress.correct + progress.incorrect) * 100) / total}%`} |
| 53 | bg="bg.200" |
| 54 | borderRadius="full" |
| 55 | transition="width 0.3s ease-in-out" |
| 56 | /> |
| 57 | </Box> |
| 58 | )} |
| 59 | </VStack> |
| 60 | ) |
| 61 | } |
| 62 | |
| 63 | export default PracticeHeader |