From e7fc9513109ae48ce407745549085c9449cf3324 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Tue, 17 Oct 2023 19:57:24 +0330
Subject: [PATCH] style: add smooth transition

---
 src/components/sound/like/like.module.css |  1 +
 src/components/sound/like/like.tsx        | 30 +++++++++++++++--------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/sound/like/like.module.css b/src/components/sound/like/like.module.css
index a38ec7d..edcd560 100644
--- a/src/components/sound/like/like.module.css
+++ b/src/components/sound/like/like.module.css
@@ -13,6 +13,7 @@
   background-color: var(--color-neutral-100);
   color: var(--color-foreground-subtle);
   cursor: pointer;
+  line-height: 0;
   outline: none;
 
   &.isFavorite {
diff --git a/src/components/sound/like/like.tsx b/src/components/sound/like/like.tsx
index f8188fe..cb6b3b4 100644
--- a/src/components/sound/like/like.tsx
+++ b/src/components/sound/like/like.tsx
@@ -1,4 +1,5 @@
 import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
+import { AnimatePresence, motion } from 'framer-motion';
 
 import { useFavoriteStore } from '@/store/favorite';
 import { cn } from '@/helpers/styles';
@@ -14,15 +15,24 @@ export function Like({ id }: LikeProps) {
   const toggleFavorite = useFavoriteStore(state => state.toggleFavorite);
 
   return (
-    <button
-      aria-label="Add Sound to Favorites"
-      className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
-      onClick={e => {
-        e.stopPropagation();
-        toggleFavorite(id);
-      }}
-    >
-      {isFavorite ? <BiSolidHeart /> : <BiHeart />}
-    </button>
+    <AnimatePresence initial={false} mode="wait">
+      <button
+        aria-label="Add Sound to Favorites"
+        className={cn(styles.favoriteButton, isFavorite && styles.isFavorite)}
+        onClick={e => {
+          e.stopPropagation();
+          toggleFavorite(id);
+        }}
+      >
+        <motion.span
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          initial={{ opacity: 0 }}
+          key={isFavorite ? `${id}-is-favorite` : `${id}-not-favorite`}
+        >
+          {isFavorite ? <BiSolidHeart /> : <BiHeart />}
+        </motion.span>
+      </button>
+    </AnimatePresence>
   );
 }