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,15 +26,8 @@ export function List({ close }: ListProps) {
         <p className={styles.empty}>You don&apos;t have any presets yet.</p>
       )}
 
-      <AnimatePresence>
       {presets.map(preset => (
-          <motion.div
+        <div className={styles.preset} key={preset.id}>
-            animate={{ opacity: 1 }}
-            className={styles.preset}
-            exit={{ opacity: 0 }}
-            initial={{ opacity: 0 }}
-            key={preset.id}
-          >
           <input
             placeholder="Untitled"
             type="text"
@@ -55,9 +47,8 @@ export function List({ close }: ListProps) {
           >
             <FaPlay />
           </button>
-          </motion.div>
+        </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 => (
             <Timer id={timer.id} key={timer.id} />
           ))}
-          </AnimatePresence>
 
           <Notice />
         </div>