style: add animation to presets

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 => (
+      <AnimatePresence>
-        <div className={styles.preset} key={preset.id}>
+        {presets.map(preset => (
-          <input
+          <motion.div
-            placeholder="Untitled"
+            animate={{ opacity: 1 }}
-            type="text"
+            className={styles.preset}
-            value={preset.label}
+            exit={{ opacity: 0 }}
-            onChange={e => changeName(preset.id, e.target.value)}
+            initial={{ opacity: 0 }}
-          />
+            key={preset.id}
-          <button onClick={() => deletePreset(preset.id)}>
-            <FaRegTrashAlt />
-          </button>
-          <button
-            className={styles.primary}
-            onClick={() => {
-              override(preset.sounds);
-              play();
-              close();
-            }}
           >
-            <FaPlay />
+            <input
-          </button>
+              placeholder="Untitled"
-        </div>
+              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>
   );
 }