fix(cmpts): defining component during render

FradSer · May 4, 2023 · f390254 · f390254
1 parent 8838455
commit f390254
Showing 1 changed file with 21 additions and 15 deletions.
diff --git a/components/Landing/Hero/DotCircle.tsx b/components/Landing/Hero/DotCircle.tsx
@@ -7,6 +7,26 @@ import {
   secondaryTransition,
 } from '@/utils/motion/springTransitions'
 
+interface IArrowProps {
+  controls: ReturnType<typeof useAnimationControls>
+  isInteractive?: boolean
+}
+
+function Arrow({ controls, isInteractive }: IArrowProps) {
+  if (!isInteractive) return null
+
+  return (
+    <motion.div
+      animate={controls}
+      className="absolute top-4 left-9 z-10 m-auto h-6 w-6 fill-white dark:fill-black"
+    >
+      <svg viewBox="0 0 18 46">
+        <path d="M0.439999 31.768C1.54933 32.1947 2.57333 32.664 3.512 33.176C4.49333 33.688 5.41067 34.264 6.264 34.904L6.264 0.599999L11.512 0.599999L11.512 34.904C12.3653 34.3067 13.2613 33.752 14.2 33.24C15.1813 32.728 16.2267 32.2587 17.336 31.832L17.336 36.696C14.2213 39.3413 11.8533 42.2427 10.232 45.4L7.48 45.4C5.944 42.2427 3.59733 39.3413 0.439999 36.696L0.439999 31.768Z" />
+      </svg>
+    </motion.div>
+  )
+}
+
 interface IDotCircleProps {
   isInteractive?: boolean
 }
@@ -29,20 +49,6 @@ function DotCircle({ isInteractive }: IDotCircleProps) {
     },
   }
 
-  function Arrow() {
-    if (!isInteractive) return null
-    return (
-      <motion.div
-        animate={controls}
-        className="absolute top-4 left-9 z-10 m-auto h-6 w-6 fill-white dark:fill-black"
-      >
-        <svg viewBox="0 0 18 46">
-          <path d="M0.439999 31.768C1.54933 32.1947 2.57333 32.664 3.512 33.176C4.49333 33.688 5.41067 34.264 6.264 34.904L6.264 0.599999L11.512 0.599999L11.512 34.904C12.3653 34.3067 13.2613 33.752 14.2 33.24C15.1813 32.728 16.2267 32.2587 17.336 31.832L17.336 36.696C14.2213 39.3413 11.8533 42.2427 10.232 45.4L7.48 45.4C5.944 42.2427 3.59733 39.3413 0.439999 36.696L0.439999 31.768Z" />
-        </svg>
-      </motion.div>
-    )
-  }
-
   return (
     <CursorProvider targetCursorType={CursorType.headerLinkHovered}>
       <motion.div
@@ -55,7 +61,7 @@ function DotCircle({ isInteractive }: IDotCircleProps) {
         }}
         className="absolute -bottom-20 -right-20 z-30 h-24 w-24 scale-75 hover:cursor-pointer lg:-bottom-20 lg:-right-24 lg:scale-100"
       >
-        <Arrow />
+        <Arrow controls={controls} isInteractive={isInteractive} />
         <motion.div // Circle
           animate={{ height: ['20%', '100%'], width: ['20%', '100%'] }}
           transition={{ ...primaryTransition, delay: 2 }}