Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added animation to Like button

Browse source 
- added a heartbeat animation to the Like button for a little delight
This commit is contained in:
Peter Zimon 2022-07-08 13:12:38 +02:00
parent de6ea5aa45
commit d89ff82582
1 changed files with 7 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/comments-ui/src/components/Like.js
View file

@ -1,13 +1,18 @@
import {useContext} from 'react';
import {useContext, useState} from 'react';
import {ReactComponent as LikeIcon} from '../images/icons/like.svg';
import AppContext from '../AppContext';
function Like(props) {
const {onAction} = useContext(AppContext);
const [animationClass, setAnimation] = useState('');
const toggleLike = () => {
if (!props.comment.liked) {
onAction('likeComment', props.comment);
setAnimation('animate-heartbeat');
setTimeout(() => {
setAnimation('');
}, 400);
} else {
onAction('unlikeComment', props.comment);
}
@ -15,7 +20,7 @@ function Like(props) {
return (
<button className={`flex font-sans items-center text-sm ${props.comment.liked ? 'text-neutral-900 dark:text-[rgba(255,255,255,0.9)]' : 'text-neutral-400 dark:text-[rgba(255,255,255,0.5)]'}`} onClick={toggleLike}>
<LikeIcon className={`mr-[6px] ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)]'}`} />
<LikeIcon className={animationClass + ` mr-[6px] ${props.comment.liked ? 'fill-neutral-900 stroke-neutral-900 dark:fill-white dark:stroke-white' : 'stroke-neutral-400 dark:stroke-[rgba(255,255,255,0.5)]'}`} />
{props.comment.likes_count}
</button>
);