From b849b3aecd6178114b3b27a2daa014b0795ddf42 Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Wed, 18 Oct 2023 12:46:27 +0330
Subject: [PATCH] style: add animation to more/less button

---
 src/components/sounds/sounds.tsx | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/sounds/sounds.tsx b/src/components/sounds/sounds.tsx
index e4f71af..404d339 100644
--- a/src/components/sounds/sounds.tsx
+++ b/src/components/sounds/sounds.tsx
@@ -1,4 +1,5 @@
 import { useState, useMemo, useCallback } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 
 import { Sound } from '@/components/sound';
 import { useLocalStorage } from '@/hooks/use-local-storage';
@@ -65,15 +66,22 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
       </div>
 
       {sounds.length > 6 && (
-        <button
-          className={cn(
-            styles.button,
-            hasHiddenSelection && !showAll && styles.active,
-          )}
-          onClick={() => setShowAll(prev => !prev)}
-        >
-          {showAll ? 'Show Less' : 'Show More'}
-        </button>
+        <AnimatePresence initial={false} mode="wait">
+          <motion.button
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.85 }}
+            initial={{ opacity: 0, scale: 0.85 }}
+            key={showAll ? `${id}-show-less` : `${id}-show-more`}
+            transition={{ duration: 0.2 }}
+            className={cn(
+              styles.button,
+              hasHiddenSelection && !showAll && styles.active,
+            )}
+            onClick={() => setShowAll(prev => !prev)}
+          >
+            {showAll ? 'Show Less' : 'Show More'}
+          </motion.button>
+        </AnimatePresence>
       )}
     </div>
   );