"use client"; import React, { useRef, useState } from "react"; import { motion, useMotionValue, useTransform } from "framer-motion"; interface SwipeButtonProps { slideText?: string; unlockedText?: string; onUnlock?: () => void; width?: string; height?: string; trackBgColor?: string; unlockedBgColor?: string; thumbBgColor?: string; thumbIndicatorColor?: string; textColor?: string; unlockThreshold?: number; dragConstraints?: { left: number; right: number }; className?: string; } export const SwipeButton: React.FC = ({ slideText = "Slide", unlockedText = "Unlocked", onUnlock, width = "12rem", height = "3rem", trackBgColor = "#262626", unlockedBgColor = "#22c55e", thumbBgColor = "#ffffff", thumbIndicatorColor = "#d1d5db", textColor = "#737373", unlockThreshold = 140, dragConstraints = { left: 0, right: 140 }, className = "", }) => { const constraintsRef = useRef(null); const x = useMotionValue(0); const [unlocked, setUnlocked] = useState(false); useTransform(x, (value) => { if (value > unlockThreshold && !unlocked) { setUnlocked(true); onUnlock?.(); } return value; }); return (

{unlocked ? unlockedText : slideText}

); };

Swipe to Unlock Button