From f390254547ed233262120eeec88c4689aaf2e69e Mon Sep 17 00:00:00 2001
From: Frad LEE <fradser@gmail.com>
Date: Thu, 4 May 2023 22:25:12 +0800
Subject: [PATCH] fix(cmpts): defining component during render

---
 components/Landing/Hero/DotCircle.tsx | 36 ++++++++++++++++-----------
 1 file changed, 21 insertions(+), 15 deletions(-)

diff --git a/components/Landing/Hero/DotCircle.tsx b/components/Landing/Hero/DotCircle.tsx
index 807ec28..f28bd53 100644
--- 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 }}