feat: add tooltipContent on AnimatedTimer

Author: AbhishekA1509

src/Shared/Components/AnimatedTimer/AnimatedTimer.component.tsx

@@ -1,6 +1,8 @@
 import { useEffect } from 'react'
 import { animate, motion, useMotionValue, useTransform } from 'framer-motion'
 
+import { Tooltip } from '@Common/Tooltip'
+
 import { CX, CY, END_ANGLE, RADIUS, START_ANGLE } from './constants'
 import { AnimatedTimerProps } from './types'
 
@@ -26,7 +28,7 @@ const describeArcPath = (cx: number, cy: number, r: number, endAngle: number) =>
     `
 }
 
-const AnimatedTimer = ({ duration, onComplete, size = 24 }: AnimatedTimerProps) => {
+const AnimatedTimer = ({ duration, onComplete, size = 24, tooltipContent }: AnimatedTimerProps) => {
     const angle = useMotionValue<number>(START_ANGLE)
     const d = useTransform(angle, (currentAngle) => describeArcPath(CX, CY, RADIUS, currentAngle))
     useEffect(() => {
@@ -39,23 +41,27 @@ const AnimatedTimer = ({ duration, onComplete, size = 24 }: AnimatedTimerProps)
     }, [duration])
 
     return (
-        <svg
-            width={CX * 2}
-            height={CY * 2}
-            viewBox={`0 0 ${CX * 2} ${CY * 2}`}
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={`icon-dim-${size}`}
-        >
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
-                fill="var(--O500)"
-            />
-
-            <motion.path fill="var(--O200)" d={d} />
-        </svg>
+        <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
+            <div>
+                <svg
+                    width={CX * 2}
+                    height={CY * 2}
+                    viewBox={`0 0 ${CX * 2} ${CY * 2}`}
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className={`icon-dim-${size}`}
+                >
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
+                        fill="var(--O500)"
+                    />
+
+                    <motion.path fill="var(--O200)" d={d} />
+                </svg>
+            </div>
+        </Tooltip>
     )
 }
 

src/Shared/Components/AnimatedTimer/types.ts

@@ -1,5 +1,6 @@
 import { animate } from 'framer-motion'
 
+import { TooltipProps } from '@Common/Tooltip'
 import { IconBaseSizeType } from '@Shared/index'
 
 export interface AnimatedTimerProps extends Pick<Parameters<typeof animate>[2], 'onComplete'> {
@@ -12,4 +13,5 @@ export interface AnimatedTimerProps extends Pick<Parameters<typeof animate>[2],
      * @default 24
      */
     size?: IconBaseSizeType
+    tooltipContent?: TooltipProps['content']
 }