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 | 4x 22x 22x 2x 2x 22x 2x 2x 22x 1x 22x 22x | import {
Favorite as FavoriteIcon,
FavoriteBorder as FavoriteFilledIcon,
} from '@styled-icons/material';
import { events } from 'app';
import { useFavorites } from 'hooks';
import { Entity } from 'types';
import * as S from './styles';
export type FavoriteHandleProps = Entity;
const FavoriteHandle = (data: FavoriteHandleProps) => {
const { favorites } = useFavorites();
const handleAddToFavorites = (e: React.MouseEvent) => {
e.stopPropagation();
events.favorites.add(data);
};
const handleRemoveFromFavorites = (e: React.MouseEvent) => {
e.stopPropagation();
events.favorites.remove(data.id);
};
const onMouseUp = (e: React.MouseEvent) => {
e.stopPropagation();
};
const isFavorite = favorites.find(item => item.id === data.id);
return (
<>
{isFavorite ? (
<S.Container onClick={handleRemoveFromFavorites} onMouseUp={onMouseUp}>
<FavoriteIcon aria-label="Remove to favorites" />
</S.Container>
) : (
<S.Container onClick={handleAddToFavorites} onMouseUp={onMouseUp}>
<FavoriteFilledIcon aria-label="Add to favorites" />
</S.Container>
)}
</>
);
};
export { FavoriteHandle };
|