alarm-clock-plus

1"use client";
2 
3import { motion, useAnimation, type Variants } from "motion/react";
4import type { HTMLAttributes } from "react";
5import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
6import { cn } from "@/lib/utils";
7 
8export interface AlarmClockPlusIconHandle {
9  startAnimation: () => void;
10  stopAnimation: () => void;
11}
12 
13interface AlarmClockPlusIconProps extends HTMLAttributes<HTMLDivElement> {
14  size?: number;
15}
16 
17const PATH_VARIANTS: Variants = {
18  normal: {
19    y: 0,
20    x: 0,
21    transition: {
22      duration: 0.2,
23      type: "spring",
24      stiffness: 200,
25      damping: 25,
26    },
27  },
28  animate: {
29    y: -1.5,
30    x: [-1, 1, -1, 1, -1, 0],
31    transition: {
32      y: {
33        duration: 0.2,
34        type: "spring",
35        stiffness: 200,
36        damping: 25,
37      },
38      x: {
39        duration: 0.3,
40        repeat: Number.POSITIVE_INFINITY,
41        ease: "linear",
42      },
43    },
44  },
45};
46 
47const SECONDARY_PATH_VARIANTS: Variants = {
48  normal: {
49    y: 0,
50    x: 0,
51    transition: {
52      duration: 0.2,
53      type: "spring",
54      stiffness: 200,
55      damping: 25,
56    },
57  },
58  animate: {
59    y: -2.5,
60    x: [-2, 2, -2, 2, -2, 0],
61    transition: {
62      y: {
63        duration: 0.2,
64        type: "spring",
65        stiffness: 200,
66        damping: 25,
67      },
68      x: {
69        duration: 0.3,
70        repeat: Number.POSITIVE_INFINITY,
71        ease: "linear",
72      },
73    },
74  },
75};
76 
77const AlarmClockPlusIcon = forwardRef<
78  AlarmClockPlusIconHandle,
79  AlarmClockPlusIconProps
80>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
81  const controls = useAnimation();
82  const isControlledRef = useRef(false);
83 
84  useImperativeHandle(ref, () => {
85    isControlledRef.current = true;
86    return {
87      startAnimation: () => controls.start("animate"),
88      stopAnimation: () => controls.start("normal"),
89    };
90  });
91 
92  const handleMouseEnter = useCallback(
93    (e: React.MouseEvent<HTMLDivElement>) => {
94      if (isControlledRef.current) {
95        onMouseEnter?.(e);
96      } else {
97        controls.start("animate");
98      }
99    },
100    [controls, onMouseEnter]
101  );
102 
103  const handleMouseLeave = useCallback(
104    (e: React.MouseEvent<HTMLDivElement>) => {
105      if (isControlledRef.current) {
106        onMouseLeave?.(e);
107      } else {
108        controls.start("normal");
109      }
110    },
111    [controls, onMouseLeave]
112  );
113 
114  return (
115    <div
116      className={cn(className)}
117      onMouseEnter={handleMouseEnter}
118// … truncated