Fix linting errors

econia-labs · Oct 7, 2024 · 29bf47b · 29bf47b
1 parent 38fb4d8
commit 29bf47b
Showing 1 changed file with 77 additions and 71 deletions.
diff --git a/...script/frontend/src/components/pages/launch-emojicoin/animated-status-indicator/index.tsx b/...script/frontend/src/components/pages/launch-emojicoin/animated-status-indicator/index.tsx
@@ -1,46 +1,44 @@
 import { getRandomEmoji } from "@sdk/emoji_data";
-import { type AnimationSequence, stagger, useAnimate, type SequenceOptions, motion } from "framer-motion";
-import React, { useCallback, useMemo } from "react";
-import { useEffect } from "react";
+import {
+  // type AnimationSequence,
+  // stagger,
+  // useAnimate,
+  // type SequenceOptions,
+  motion,
+} from "framer-motion";
+import React, { useMemo } from "react";
+// import { useEffect } from "react";
 
-const useStaggerAnimation = () => {
-  const [scope, animate] = useAnimate();
-
-  const delay = stagger(0.05, { from: "first" })
-  const marginBottom = [0, 10, -3, 0];
-
-  const generateSequence: (i: number) => AnimationSequence = (i: number) => ([[
-    `.item-${i}`,
-    { marginBottom, opacity: i == 0 ? 1 : 0 },
-    { delay },
-  ],[
-    `.item-${i}`,
-    { marginBottom, opacity: i == 1 ? 1 : 0 },
-    { delay },
-  ],[
-    `.item-${i}`,
-    { marginBottom, opacity: i == 2 ? 1 : 0 },
-    { delay },
-  ]]);
-
-  const sequence0 = generateSequence(0);
-  const sequence1 = generateSequence(1);
-  const sequence2 = generateSequence(2);
-
-  const options: SequenceOptions = {
-    repeat: Infinity,
-    repeatType: "loop",
-  };
-
-  useEffect(() => {
-    animate(sequence0, options);
-    animate(sequence1, options);
-    animate(sequence2, options);
-    /* eslint-disable-next-line */
-  }, []);
-
-  return scope;
-};
+//const useStaggerAnimation = () => {
+//  const [scope, animate] = useAnimate();
+//
+//  const delay = stagger(0.05, { from: "first" });
+//  const marginBottom = [0, 10, -3, 0];
+//
+//  const generateSequence: (i: number) => AnimationSequence = (i: number) => [
+//    [`.item-${i}`, { marginBottom, opacity: i == 0 ? 1 : 0 }, { delay }],
+//    [`.item-${i}`, { marginBottom, opacity: i == 1 ? 1 : 0 }, { delay }],
+//    [`.item-${i}`, { marginBottom, opacity: i == 2 ? 1 : 0 }, { delay }],
+//  ];
+//
+//  const sequence0 = generateSequence(0);
+//  const sequence1 = generateSequence(1);
+//  const sequence2 = generateSequence(2);
+//
+//  const options: SequenceOptions = {
+//    repeat: Infinity,
+//    repeatType: "loop",
+//  };
+//
+//  useEffect(() => {
+//    animate(sequence0, options);
+//    animate(sequence1, options);
+//    animate(sequence2, options);
+//    /* eslint-disable-next-line */
+//  }, []);
+//
+//  return scope;
+//};
 
 //export const AnimatedStatusIndicator = ({
 //  numHearts = 14,
@@ -80,47 +78,55 @@ const useStaggerAnimation = () => {
 //
 //export default React.memo(AnimatedStatusIndicator);
 
-export const AnimatedStatusIndicator = ({
-  numHearts = 14,
-}: {
-  numHearts?: number;
-}) => {
-  const emojis = useMemo(() => Array.from({ length: numHearts }), [numHearts]).map(() => getRandomEmoji());
+export const AnimatedStatusIndicator = ({ numHearts = 14 }: { numHearts?: number }) => {
+  const emojis = useMemo(() => Array.from({ length: numHearts }), [numHearts]).map(() =>
+    getRandomEmoji()
+  );
   const degrees = 360 / numHearts;
-  const opacity = 1 / numHearts;
 
   return (
-    <motion.div className="pixel-heading-4 relative select-none mt-[100px]" initial={{
-      transform: "rotate(0deg)",
-    }}
-    transition={{
+    <motion.div
+      className="pixel-heading-4 relative select-none mt-[100px]"
+      initial={{
+        transform: "rotate(0deg)",
+      }}
+      transition={{
         repeat: Infinity,
         ease: null,
         duration: 2.5,
-      }}>
+      }}
+    >
       {emojis.map((emoji, i) => (
         <div key={`heart-row-${i}`} className="relative">
-          <div className="z-[-1] absolute top-0 left-0 w-[20px] h-[150px]" style={{
-            transform: `translateX(-50%) translateY(-50%) rotate(${degrees * i}deg)`,
-          }}>
+          <div
+            className="z-[-1] absolute top-0 left-0 w-[20px] h-[150px]"
+            style={{
+              transform: `translateX(-50%) translateY(-50%) rotate(${degrees * i}deg)`,
+            }}
+          >
             {emoji.emoji}
           </div>
-          <div className="z-[1] absolute top-0 left-0 w-[30px] h-[160px]" style={{
-            transform: `translateX(-50%) translateY(-50%) rotate(${degrees * i}deg)`,
-          }}>
-            <motion.div className="w-[30px] h-[30px] bg-black"
-            initial={{
-              opacity: 1,
-            }}
-            animate={{
-              opacity: [null,0,1]
+          <div
+            className="z-[1] absolute top-0 left-0 w-[30px] h-[160px]"
+            style={{
+              transform: `translateX(-50%) translateY(-50%) rotate(${degrees * i}deg)`,
             }}
-            transition={{
-              delay: 1 / numHearts * i,
-              duration: 1,
-              ease: "circIn",
-              repeat: Infinity,
-            }}></motion.div>
+          >
+            <motion.div
+              className="w-[30px] h-[30px] bg-black"
+              initial={{
+                opacity: 1,
+              }}
+              animate={{
+                opacity: [null, 0, 1],
+              }}
+              transition={{
+                delay: (1 / numHearts) * i,
+                duration: 1,
+                ease: "circIn",
+                repeat: Infinity,
+              }}
+            ></motion.div>
           </div>
         </div>
       ))}