From cddac9184249d60934c82758b32c0366085aaa63 Mon Sep 17 00:00:00 2001
From: Frad LEE <fradser@gmail.com>
Date: Sat, 13 Apr 2024 21:41:04 +0800
Subject: [PATCH] fix(landing): dot circle animaiton

- Refactored DotCircle component to use useState hook for managing hover state.
- Updated arrow animation to use useState hook for hover effect.
- Added animationCircleDelay and animationArrowDelay variables for better readability.
---
 components/Landing/Hero/DotCircle.tsx | 33 ++++++++++++++++-----------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/Landing/Hero/DotCircle.tsx b/components/Landing/Hero/DotCircle.tsx
index e2e6ffa..a26ff36 100644
--- a/components/Landing/Hero/DotCircle.tsx
+++ b/components/Landing/Hero/DotCircle.tsx
@@ -1,30 +1,37 @@
+import { useState } from 'react'
+
 import { motion } from 'framer-motion'
 
 import { CursorProvider, CursorType } from '@/components/common/CursorProvider'
 
-import {
-  primaryTransition,
-  secondaryTransition,
-} from '@/utils/motion/springTransitions'
+import { primaryTransition } from '@/utils/motion/springTransitions'
 
 interface IDotCircleProps {
   isInteractive?: boolean
 }
 
 function DotCircle({ isInteractive }: IDotCircleProps) {
+  let animationCircleDelay = 2.5
+  let animationArrowDelay = 0.6
+  const [hovered, setHovered] = useState<boolean>(false)
+
   return (
     <CursorProvider targetCursorType={CursorType.headerLinkHovered}>
-      <div 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">
-        <motion.div
+      <motion.div
+        onHoverStart={() => setHovered(true)}
+        onHoverEnd={() => setHovered(false)}
+        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"
+      >
+        <motion.div // Arrow
           whileInView={{
             opacity: [0, 1],
-            transition: { ...primaryTransition, delay: 2.5 },
+            transition: {
+              ...primaryTransition,
+              delay: animationArrowDelay + animationCircleDelay,
+            },
           }}
           viewport={{ once: true }}
-          whileHover={{
-            scale: 1.1,
-            transition: { ...primaryTransition },
-          }}
+          animate={{ scale: hovered ? 1.1 : 1 }}
           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">
@@ -34,14 +41,14 @@ function DotCircle({ isInteractive }: IDotCircleProps) {
         <motion.div // Circle
           initial={{ height: '20%', width: '20%' }}
           animate={{ height: ['20%', '100%'], width: ['20%', '100%'] }}
-          transition={{ ...primaryTransition, delay: 2 }}
+          transition={{ ...primaryTransition, delay: animationCircleDelay }}
           className="absolute z-0 h-full w-full"
         >
           <svg viewBox="0 0 96 96" className="fill-black dark:fill-white">
             <circle cx="48" cy="48" r="48" />
           </svg>
         </motion.div>
-      </div>
+      </motion.div>
     </CursorProvider>
   )
 }