Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 356x 506x 506x 506x 506x 1x 506x 506x 506x 1x 506x 506x | import { MouseEventHandler, ReactElement } from "react";
import styled from "styled-components";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useTranslation } from "react-i18next";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
interface Props {
isFavorite: boolean;
onClick?: MouseEventHandler;
}
export const FavoriteButton = ({
isFavorite,
onClick,
}: Props): ReactElement => {
const { t } = useTranslation();
const dataTestId = isFavorite
? "remove-favorite-button"
: "add-favorite-button";
const ariaLabelKey = isFavorite
? "iconAltText.deleteFavorite"
: "iconAltText.addFavorite";
const icon: IconProp = isFavorite ? "heart" : ["far", "heart"];
return (
<StyledButton
onClick={onClick}
data-testid={dataTestId}
aria-label={t(ariaLabelKey)}
>
<FavoriteIcon icon={icon} aria-hidden="true" />
</StyledButton>
);
};
const StyledButton = styled.button`
border-radius: 100px;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
background-color: inherit;
&:hover,
&:focus-visible {
background: ${(props) => props.theme.buttonSecondaryHover};
color: ${(props) => props.theme.textMain};
}
&:active {
background: ${(props) => props.theme.buttonSecondaryClicked};
}
`;
const FavoriteIcon = styled(FontAwesomeIcon)`
color: ${(props) => props.theme.iconFavorite};
font-size: ${(props) => props.theme.iconSizeLarge};
`;
|