airplay

1"use client";
2 
3import { easeInOut, easeOut, motion, useAnimation } from "motion/react";
4import type { HTMLAttributes } from "react";
5import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
6 
7import { cn } from "@/lib/utils";
8 
9export interface AirplayIconHandle {
10  startAnimation: () => void;
11  stopAnimation: () => void;
12}
13 
14interface AirplayIconProps extends HTMLAttributes<HTMLDivElement> {
15  size?: number;
16}
17 
18const DURATION = 0.3;
19 
20const SCREEN_VARIANTS = {
21  normal: {
22    opacity: 1,
23    pathLength: 1,
24    pathOffset: 0,
25    transition: { duration: DURATION },
26  },
27  animate: {
28    opacity: [0, 1],
29    pathLength: [0, 1],
30    pathOffset: [1, 0],
31    transition: {
32      duration: DURATION * 2,
33      ease: easeInOut,
34    },
35  },
36};
37 
38const TRIANGLE_VARIANTS = {
39  normal: {
40    scale: 1,
41    opacity: 1,
42    transition: { duration: DURATION },
43  },
44  animate: {
45    scale: [0.6, 1.1, 1],
46    opacity: [0, 1],
47    transition: {
48      duration: DURATION * 2,
49      ease: easeOut,
50    },
51  },
52};
53 
54const AirplayIcon = forwardRef<AirplayIconHandle, AirplayIconProps>(
55  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
56    const controls = useAnimation();
57    const isControlledRef = useRef(false);
58 
59    useImperativeHandle(ref, () => {
60      isControlledRef.current = true;
61 
62      return {
63        startAnimation: async () => {
64          await controls.start("animate");
65          controls.start("normal");
66        },
67        stopAnimation: () => controls.start("normal"),
68      };
69    });
70 
71    const handleMouseEnter = useCallback(
72      async (e: React.MouseEvent<HTMLDivElement>) => {
73        if (isControlledRef.current) {
74          onMouseEnter?.(e);
75        } else {
76          await controls.start("animate");
77          controls.start("normal");
78        }
79      },
80      [controls, onMouseEnter]
81    );
82 
83    const handleMouseLeave = useCallback(
84      (e: React.MouseEvent<HTMLDivElement>) => {
85        if (isControlledRef.current) {
86          onMouseLeave?.(e);
87        } else {
88          controls.start("normal");
89        }
90      },
91      [controls, onMouseLeave]
92    );
93 
94    return (
95      <div
96        className={cn(className)}
97        onMouseEnter={handleMouseEnter}
98        onMouseLeave={handleMouseLeave}
99        {...props}
100      >
101        <svg
102          fill="none"
103          height={size}
104          stroke="currentColor"
105          strokeLinecap="round"
106          strokeLinejoin="round"
107          strokeWidth="2"
108// … truncated