archive

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 ArchiveIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ArchiveIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const RECT_VARIANTS: Variants = {
20  normal: {
21    translateY: 0,
22    transition: {
23      duration: 0.2,
24      type: "spring",
25      stiffness: 200,
26      damping: 25,
27    },
28  },
29  animate: {
30    translateY: -1.5,
31    transition: {
32      duration: 0.2,
33      type: "spring",
34      stiffness: 200,
35      damping: 25,
36    },
37  },
38};
39 
40const PATH_VARIANTS: Variants = {
41  normal: { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" },
42  animate: { d: "M4 11v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11" },
43};
44 
45const SECONDARY_PATH_VARIANTS: Variants = {
46  normal: { d: "M10 12h4" },
47  animate: { d: "M10 15h4" },
48};
49 
50const ArchiveIcon = forwardRef<ArchiveIconHandle, ArchiveIconProps>(
51  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
52    const controls = useAnimation();
53    const isControlledRef = useRef(false);
54 
55    useImperativeHandle(ref, () => {
56      isControlledRef.current = true;
57 
58      return {
59        startAnimation: () => controls.start("animate"),
60        stopAnimation: () => controls.start("normal"),
61      };
62    });
63 
64    const handleMouseEnter = useCallback(
65      (e: React.MouseEvent<HTMLDivElement>) => {
66        if (isControlledRef.current) {
67          onMouseEnter?.(e);
68        } else {
69          controls.start("animate");
70        }
71      },
72      [controls, onMouseEnter]
73    );
74 
75    const handleMouseLeave = useCallback(
76      (e: React.MouseEvent<HTMLDivElement>) => {
77        if (isControlledRef.current) {
78          onMouseLeave?.(e);
79        } else {
80          controls.start("normal");
81        }
82      },
83      [controls, onMouseLeave]
84    );
85 
86    return (
87      <div
88        className={cn(className)}
89        onMouseEnter={handleMouseEnter}
90        onMouseLeave={handleMouseLeave}
91        {...props}
92      >
93        <svg
94          fill="none"
95          height={size}
96          stroke="currentColor"
97          strokeLinecap="round"
98          strokeLinejoin="round"
99          strokeWidth="2"
100          viewBox="0 0 24 24"
101          width={size}
102          xmlns="http://www.w3.org/2000/svg"
103// … truncated