Arrow Fill Button

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3"use client";
4 
5import { useEffect, useRef, useState } from "react";
6import { ArrowRight } from "lucide-react";
7 
8const DEFAULT_HREF = "#";
9const COMPACT_LAYOUT_BREAKPOINT = 1280;
10const ANIMATION_DURATION_MS = 450;
11 
12function ArrowFillButton({
13  btnText="Hover Me",
14  href = DEFAULT_HREF,
15  className = "",
16 
17  bgColor = "#ff5f00",
18  textColor = "#ffffff",
19 
20  fillBgColor = "#ffffff",
21  fillTextColor = "#ff5f00",
22 
23  hoverFillBgColor = "#ffffff",
24  hoverFillTextColor = "#ff5f00",
25 
26  arrowColor,
27  hoverArrowColor,
28 
29  ...props
30}) {
31  const [isReady, setIsReady] = useState(false);
32  const [isCompactLayout, setIsCompactLayout] = useState(false);
33  const [isPressed, setIsPressed] = useState(false);
34  const releaseTimeoutRef = useRef(null);
35 
36  const usesUtilityBackground =
37    className.includes("bg-") ||
38    className.includes("from-") ||
39    className.includes("via-") ||
40    className.includes("to-");
41 
42  useEffect(() => {
43    const frame = window.requestAnimationFrame(() => {
44      setIsReady(true);
45    });
46 
47    return () => window.cancelAnimationFrame(frame);
48  }, []);
49 
50  useEffect(() => {
51    const mediaQuery = window.matchMedia(
52      `(max-width: ${COMPACT_LAYOUT_BREAKPOINT - 1}px)`
53    );
54 
55    const syncCompactLayout = (event) => {
56      const matches = "matches" in event ? event.matches : event.currentTarget.matches;
57      setIsCompactLayout(matches);
58 
59      if (!matches) {
60        setIsPressed(false);
61      }
62    };
63 
64    syncCompactLayout(mediaQuery);
65    mediaQuery.addEventListener("change", syncCompactLayout);
66 
67    return () => {
68      mediaQuery.removeEventListener("change", syncCompactLayout);
69    };
70  }, []);
71 
72  useEffect(() => {
73    return () => {
74      if (releaseTimeoutRef.current) {
75        window.clearTimeout(releaseTimeoutRef.current);
76      }
77    };
78  }, []);
79 
80  const clearPressedState = () => {
81    if (releaseTimeoutRef.current) {
82      window.clearTimeout(releaseTimeoutRef.current);
83    }
84 
85    releaseTimeoutRef.current = window.setTimeout(() => {
86      setIsPressed(false);
87      releaseTimeoutRef.current = null;
88    }, ANIMATION_DURATION_MS);
89  };
90 
91  const handlePointerDown = (event) => {
92    props.onPointerDown?.(event);
93 
94    if (!isCompactLayout || event.pointerType === "mouse") {
95      return;
96    }
97 
98    if (releaseTimeoutRef.current) {
99      window.clearTimeout(releaseTimeoutRef.current);
100      releaseTimeoutRef.current = null;
101    }
102 
103    setIsPressed(true);
104  };
105 
106// … truncated