Add To Cart Button

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
"use client";
 
import {
  forwardRef,
  useEffect,
  useRef,
  useState,
  type ComponentPropsWithoutRef,
} from "react";
 
import { cn } from "@/lib/cn";
import { Check, Loader2, ShoppingBag } from "lucide-react";
 
type Phase = "idle" | "loading" | "added";
 
export type AddToCartButtonProps = Readonly<
  {
    label?: string;
    loadingLabel?: string;
    addedLabel?: string;
    loadingMs?: number;
    resetMs?: number;
  } & ComponentPropsWithoutRef<"button">
>;
 
// Add-to-cart — morphs idle → loading → added, then settles back.
export const AddToCartButton = forwardRef<
  HTMLButtonElement,
  AddToCartButtonProps
>(
  (
    {
      className,
      label = "Add to cart",
      loadingLabel = "Adding",
      addedLabel = "Added to cart",
      loadingMs = 1200,
      resetMs = 1600,
      onClick,
      ...props
    },
    ref,
  ) => {
    const [phase, setPhase] = useState<Phase>("idle");
    const timers = useRef<ReturnType<typeof setTimeout>[]>([]);
 
    useEffect(() => {
      const timeoutIds = timers;
      return () => {
        timeoutIds.current.forEach((id) => globalThis.clearTimeout(id));
      };
    }, []);
 
    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      onClick?.(event);
      if (phase !== "idle") return;
      setPhase("loading");
      timers.current.push(
        globalThis.setTimeout(() => setPhase("added"), loadingMs),
        globalThis.setTimeout(() => setPhase("idle"), loadingMs + resetMs),
      );
    };
 
    return (
      <button
        ref={ref}
        type="button"
        data-slot="add-to-cart-button"
        data-phase={phase}
        onClick={handleClick}
        disabled={phase !== "idle"}
        className={cn(
          "relative flex h-12 min-w-44 cursor-pointer items-center justify-center overflow-hidden rounded-xl px-6 font-sans text-sm font-semibold text-white transition-colors duration-300",
          phase === "added" ? "bg-emerald-500" : "bg-neutral-900",
          "disabled:cursor-default",
          className,
        )}
        {...props}
      >
        <span
          className={cn(
            "flex items-center gap-2 transition-all duration-300",
            phase === "idle"
              ? "translate-y-0 opacity-100"
              : "-translate-y-6 opacity-0",
          )}
        >
          <ShoppingBag size={15} strokeWidth={2} />
          {label}
        </span>
 
        <span
          className={cn(
            "absolute flex items-center gap-2 transition-all duration-300",
            phase === "loading"
              ? "translate-y-0 opacity-100"
              : "translate-y-6 opacity-0",
          )}
        >
          <Loader2 size={15} strokeWidth={2.5} className="animate-spin" />
          {loadingLabel}
        </span>
 
        <span
          className={cn(
            "absolute flex items-center gap-2 transition-all duration-300",
            phase === "added"
              ? "translate-y-0 opacity-100"
              : "translate-y-6 opacity-0",
          )}
        >
          <Check size={16} strokeWidth={2.5} />
          {addedLabel}
        </span>
      </button>
    );
  },
);
 
AddToCartButton.displayName = "AddToCartButton";