alarm-clock

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