| 10 | } |
| 11 | |
| 12 | function CardHeader({ side, onFlip, onSave }: CardHeaderProps) { |
| 13 | const { t } = useTranslation() |
| 14 | return ( |
| 15 | <HStack w="100%" justifyContent="space-between" alignItems="center"> |
| 16 | <IconButton |
| 17 | colorPalette="teal" |
| 18 | size="sm" |
| 19 | onClick={onFlip} |
| 20 | aria-label={t('components.cardHeader.switchCard')} |
| 21 | variant="ghost" |
| 22 | _hover={{ |
| 23 | transform: 'scale(1.05)', |
| 24 | bg: 'bg.50', |
| 25 | }} |
| 26 | > |
| 27 | <FiRepeat /> |
| 28 | </IconButton> |
| 29 | <Text |
| 30 | fontSize="md" |
| 31 | color="fg.DEFAULT" |
| 32 | fontWeight="semibold" |
| 33 | textTransform="uppercase" |
| 34 | letterSpacing="wide" |
| 35 | > |
| 36 | {t(`general.words.${side}`)} |
| 37 | </Text> |
| 38 | <IconButton |
| 39 | colorPalette="teal" |
| 40 | size="sm" |
| 41 | aria-label={t('general.actions.save')} |
| 42 | variant="ghost" |
| 43 | onClick={onSave} |
| 44 | _hover={{ |
| 45 | transform: 'scale(1.05)', |
| 46 | bg: 'bg.50', |
| 47 | }} |
| 48 | > |
| 49 | <IoClose /> |
| 50 | </IconButton> |
| 51 | </HStack> |
| 52 | ) |
| 53 | } |
| 54 | |
| 55 | export default CardHeader |