"use client"; import { Power } from "lucide-react"; import { motion, useAnimation, useAnimationFrame, useMotionValue, useReducedMotion, } from "motion/react"; import { type RefObject, useRef, useState } from "react"; const SLIDE_THRESHOLD = 160; const SLIDE_MAX_DISTANCE = 168; const PERCENTAGE_MULTIPLIER = 100; export interface PowerOffSlideProps { onPowerOff?: () => void; label?: string; className?: string; duration?: number; disabled?: boolean; } export default function PowerOffSlide({ onPowerOff, label = "Slide to power off", className = "", duration = 2000, disabled = false, }: PowerOffSlideProps) { const [isPoweringOff, setIsPoweringOff] = useState(false); const x = useMotionValue(0); const controls = useAnimation(); const constraintsRef = useRef(null); const textRef: RefObject = useRef(null); const shouldReduceMotion = useReducedMotion(); useAnimationFrame((t) => { if (shouldReduceMotion) { return; } const animDuration = duration; const progress = (t % animDuration) / animDuration; if (textRef.current) { textRef.current.style.setProperty( "--x", `${(1 - progress) * PERCENTAGE_MULTIPLIER}%` ); } }); const handleDragEnd = async () => { if (disabled) { return; } const dragDistance = x.get(); if (dragDistance > SLIDE_THRESHOLD) { await controls.start({ x: SLIDE_MAX_DISTANCE }); setIsPoweringOff(true); if (onPowerOff) { onPowerOff(); } setTimeout(() => { setIsPoweringOff(false); controls.start({ x: 0 }); x.set(0); }, duration); } else { controls.start({ x: 0 }); } }; return (

{isPoweringOff ? (

Shutting down...

) : (

{label}

)}

); }

Power Off Slide

Installation

Features

Props

On this page