Drag-to-Confirm Slider

1"use client";
2 
3import { motion, PanInfo, useMotionValue, useTransform } from "framer-motion";
4import { Check } from "lucide-react";
5import { useState } from "react";
6 
7type DragToConfirmSliderProps = {
8  onConfirm?: () => void;
9  label?: string;
10  confirmText?: string;
11};
12 
13export function DragToConfirmSlider({
14  onConfirm,
15  label = "Drag to confirm",
16  confirmText = "Confirmed!",
17}: DragToConfirmSliderProps) {
18  const [isConfirmed, setIsConfirmed] = useState(false);
19  const [isDragging, setIsDragging] = useState(false);
20  const x = useMotionValue(0);
21 
22  const progress = useTransform(x, [0, 200], [0, 100]);
23  const opacity = useTransform(x, [0, 200], [1, 0]);
24  const labelOpacity = useTransform(progress, [0, 100], [1, 0]);
25  const width = useTransform(x, [0, 200], [48, 248]);
26 
27  const handleDragEnd = (
28    _: MouseEvent | TouchEvent | PointerEvent,
29    info: PanInfo
30  ) => {
31    const currentX = x.get();
32    if (currentX >= 180) {
33      setIsConfirmed(true);
34      if (onConfirm) {
35        setTimeout(() => onConfirm(), 300);
36      }
37    } else {
38      x.set(0);
39    }
40    setIsDragging(false);
41  };
42 
43  if (isConfirmed) {
44    return (
45      <motion.div
46        initial={{ scale: 0 }}
47        animate={{ scale: 1 }}
48        className="flex h-12 w-full items-center justify-center rounded-full bg-primary text-primary-foreground"
49      >
50        <Check className="h-5 w-5" />
51        <span className="ml-2 text-sm font-medium">{confirmText}</span>
52      </motion.div>
53    );
54  }
55 
56  return (
57    <div className="relative h-12 w-full max-w-xs overflow-hidden rounded-full border border-border bg-muted">
58      <motion.div
59        drag="x"
60        dragConstraints={{ left: 0, right: 200 }}
61        dragElastic={0}
62        onDragStart={() => setIsDragging(true)}
63        onDragEnd={handleDragEnd}
64        style={{ x, width }}
65        className="absolute left-0 top-0 flex h-full cursor-grab items-center justify-center rounded-full bg-primary active:cursor-grabbing"
66        whileDrag={{ scale: 1.05 }}
67      >
68        <motion.div style={{ opacity }} className="flex items-center gap-2">
69          <span className="text-sm font-medium text-primary-foreground">→</span>
70        </motion.div>
71      </motion.div>
72 
73      <div className="absolute inset-0 flex items-center justify-center">
74        <motion.span
75          style={{ opacity: labelOpacity }}
76          className="text-sm font-medium text-muted-foreground"
77        >
78          {label}
79        </motion.span>
80      </div>
81    </div>
82// … truncated