From 787a9b60b51334ec2a7423d489f71c305661039e Mon Sep 17 00:00:00 2001
From: MAZE <remvze@proton.me>
Date: Sun, 16 Jun 2024 22:14:44 +0430
Subject: [PATCH] style: add animation to presets

---
 src/components/modals/presets/list/list.tsx | 53 ++++++++++++---------
 1 file changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/components/modals/presets/list/list.tsx b/src/components/modals/presets/list/list.tsx
index 02d8bd4..5d89c20 100644
--- a/src/components/modals/presets/list/list.tsx
+++ b/src/components/modals/presets/list/list.tsx
@@ -1,4 +1,5 @@
 import { FaPlay, FaRegTrashAlt } from 'react-icons/fa/index';
+import { motion, AnimatePresence } from 'framer-motion';
 
 import styles from './list.module.css';
 
@@ -26,29 +27,37 @@ export function List({ close }: ListProps) {
         <p className={styles.empty}>You don&apos;t have any presets yet.</p>
       )}
 
-      {presets.map(preset => (
-        <div className={styles.preset} key={preset.id}>
-          <input
-            placeholder="Untitled"
-            type="text"
-            value={preset.label}
-            onChange={e => changeName(preset.id, e.target.value)}
-          />
-          <button onClick={() => deletePreset(preset.id)}>
-            <FaRegTrashAlt />
-          </button>
-          <button
-            className={styles.primary}
-            onClick={() => {
-              override(preset.sounds);
-              play();
-              close();
-            }}
+      <AnimatePresence>
+        {presets.map(preset => (
+          <motion.div
+            animate={{ opacity: 1 }}
+            className={styles.preset}
+            exit={{ opacity: 0 }}
+            initial={{ opacity: 0 }}
+            key={preset.id}
           >
-            <FaPlay />
-          </button>
-        </div>
-      ))}
+            <input
+              placeholder="Untitled"
+              type="text"
+              value={preset.label}
+              onChange={e => changeName(preset.id, e.target.value)}
+            />
+            <button onClick={() => deletePreset(preset.id)}>
+              <FaRegTrashAlt />
+            </button>
+            <button
+              className={styles.primary}
+              onClick={() => {
+                override(preset.sounds);
+                play();
+                close();
+              }}
+            >
+              <FaPlay />
+            </button>
+          </motion.div>
+        ))}
+      </AnimatePresence>
     </div>
   );
 }