style: remove animations

src/components/modals/presets/list/list.tsx

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

src/components/toolbox/countdown-timer/timers/timer/timer.tsx

@@ -5,7 +5,6 @@ import {
   IoRefresh,
   IoTrashOutline,
 } from 'react-icons/io5/index';
-import { motion } from 'framer-motion';
 
 import { ReverseTimer } from './reverse-timer';
 
@@ -139,20 +138,8 @@ export function Timer({ id }: TimerProps) {
     };
   }, [isRunning, tick, id, spent, total, left]);
 
-  const variants = {
-    enter: { opacity: 1 },
-    exit: { opacity: 0 },
-    initial: { opacity: 0 },
-  };
-
   return (
-    <motion.div
+    <div className={styles.timer}>
-      animate="enter"
-      className={styles.timer}
-      exit="exit"
-      initial="initial"
-      variants={variants}
-    >
       <header className={styles.header}>
         <div className={styles.bar}>
           <div
@@ -211,6 +198,6 @@ export function Timer({ id }: TimerProps) {
           <IoTrashOutline />
         </button>
       </footer>
-    </motion.div>
+    </div>
   );
 }

src/components/toolbox/countdown-timer/timers/timers.tsx

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-import { AnimatePresence } from 'framer-motion';
 
 import { Timer } from './timer';
 import { Notice } from './notice';
@@ -31,11 +30,9 @@ export function Timers() {
             )}
           </header>
 
-          <AnimatePresence>
+          {timers.map(timer => (
-            {timers.map(timer => (
+            <Timer id={timer.id} key={timer.id} />
-              <Timer id={timer.id} key={timer.id} />
+          ))}
-            ))}
-          </AnimatePresence>
 
           <Notice />
         </div>