"use client"; import { cn } from "@/lib/utils"; import type { Transition, Variants } from "motion/react"; import { motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; export type ShredState = "idle" | "preview" | "shredding" | "shredded"; const IDLE_SHADOW = "0px 0px 0px rgba(3,7,18,0)"; const PREVIEW_SHADOW = "0px 8px 18px rgba(153,27,27,.22)"; const QUICK_TRANSITION = { duration: 0.01 } as const; const SHRED_COMPLETE_DELAY = 1500; const REDUCED_MOTION_SHRED_COMPLETE_DELAY = 120; const RESET_DELAY_MS = 2500; const buttonClassName = cn( "absolute top-[176px] left-1/2 z-20 inline-flex h-14 origin-bottom cursor-pointer items-center justify-center gap-3 select-none", "rounded-xl border-x-2 border-t-2 border-b-4 border-red-800 bg-red-500 px-8 py-3 whitespace-nowrap", "text-lg font-medium text-white transition-colors hover:bg-red-600", "dark:border-red-950 dark:bg-red-600 dark:hover:bg-red-500", "ring-offset-background dark:ring-offset-[hsl(225_7%_11%)]", "active:border-b-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-100", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-400/60 focus-visible:ring-offset-2" ); const iconClassName = "size-5 fill-white/85 stroke-transparent"; const documentClassName = cn( "pointer-events-none absolute top-[18px] left-1/2 z-10 h-40 w-[120px] opacity-0", "border border-black/10 bg-[#f7f4ee]", "dark:border-white/15 dark:bg-[#ebe6dc]", "[filter:drop-shadow(0_4px_12px_rgba(0,0,0,0.12))] dark:[filter:drop-shadow(0_8px_18px_rgba(0,0,0,0.45))]" ); const shreddedSvgClassName = cn( "pointer-events-none absolute top-[218px] left-1/2 z-10 h-[150px] w-[120px] opacity-0", "fill-none stroke-[#e8e2d6]", "dark:stroke-[#d9d2c4]", "[filter:drop-shadow(0_2px_6px_rgba(0,0,0,0.12))] dark:[filter:drop-shadow(0_4px_10px_rgba(0,0,0,0.4))]" ); const shredPaths = [ "M22.74,0v59.49c0,3.37-.21,7.86-.53,12.79-1.34,20.7-4.18,32.27-8.35,52.58l-6.96,24.13", "M33.65,0v59.49c0,3.37-.17,7.86-.42,12.79-1.07,20.7-3.34,32.27-6.68,52.58l-5.57,24.13", "M44.56,0v59.49c0,3.37-.13,7.86-.32,12.79-.8,20.7-2.51,32.27-5.01,52.58l-4.18,24.13", "M55.47,0v59.49c0,3.37-.08,7.86-.21,12.79-.54,20.7-1.67,32.27-3.34,52.58l-2.78,24.13", "M66.37,0v59.49c0,3.37-.04,7.86-.11,12.79-.27,20.7-.84,32.27-1.67,52.58l-1.39,24.13", "M77.28,0v59.49c0,3.37,0,7.86,0,12.79,0,20.7,0,32.27,0,52.58v24.13", "M88.19,0v59.49c0,3.37.04,7.86.11,12.79.27,20.7.84,32.27,1.67,52.58l1.39,24.13", "M99.1,0v59.49c0,3.37.08,7.86.21,12.79.54,20.7,1.67,32.27,3.34,52.58l2.78,24.13", "M110.01,0v59.49c0,3.37.13,7.86.32,12.79.8,20.7,2.51,32.27,5.01,52.58l4.18,24.13", "M120.92,0v59.49c0,3.37.17,7.86.42,12.79,1.07,20.7,3.34,32.27,6.68,52.58l5.57,24.13", "M131.83,0v59.49c0,3.37.21,7.86.53,12.79,1.34,20.7,4.18,32.27,8.35,52.58l6.96,24.13", ]; const buttonVariants: Variants = { idle: { x: "-50%", scale: 1, y: 0, boxShadow: IDLE_SHADOW, }, preview: { x: "-50%", scale: 1.03, y: -2, boxShadow: PREVIEW_SHADOW, }, shredding: { x: "-50%", scale: 1, y: 0, boxShadow: IDLE_SHADOW, }, shredded: { x: "-50%", scale: 1, y: 0, boxShadow: IDLE_SHADOW, }, }; const iconVariants: Variants = { idle: { rotate: 0, scale: 1 }, preview: { rotate: -8, scale: 1.35 }, shredding: { rotate: -8, scale: 1.15 }, shredded: { rotate: 0, scale: 1 }, }; const documentVariants: Variants = { idle: { opacity: 0, x: "-50%", y: 14, scale: 0.94, clipPath: "inset(0% 0% 0% 0%)", }, preview: { opacity: 1, x: "-50%", y: 0, scale: 1, clipPath: "inset(0% 0% 0% 0%)", }, shredding: { opacity: 0, x: "-50%", y: 0, scale: 1, clipPath: "inset(100% 0% 0% 0%)", }, shredded: { opacity: 0, x: "-50%", y: 155, scale: 1, clipPath: "inset(100% 0% 0% 0%)", }, }; const shreddedSvgVariants: Variants = { idle: { opacity: 0, x: "-50%" }, preview: { opacity: 0, x: "-50%" }, shredding: { opacity: 1, x: "-50%" }, shredded: { opacity: 1, x: "-50%" }, }; const createDocumentTransition = ( state: ShredState, shouldReduceMotion: boolean ): Transition => { if (shouldReduceMotion) { return QUICK_TRANSITION; } if (state === "shredding") { return { duration: 1.15, ease: [0.65, 0, 0.35, 1] }; } if (state === "shredded") { return { duration: 0.12, ease: [0.215, 0.61, 0.355, 1] }; } return { duration: 0.3, ease: [0.215, 0.61, 0.355, 1] }; }; const createPathVariants = (shouldReduceMotion: boolean): Variants => ({ idle: { pathLength: 0, opacity: 0, y: -4, transition: { duration: shouldReduceMotion ? QUICK_TRANSITION.duration : 0.08, }, }, preview: { pathLength: 0, opacity: 0, y: -4, transition: { duration: shouldReduceMotion ? QUICK_TRANSITION.duration : 0.08, }, }, shredding: (index: number) => ({ pathLength: 1, opacity: 1, y: 0, transition: shouldReduceMotion ? { duration: 0.01 } : { pathLength: { delay: 0.25 + index * 0.035, duration: 0.55, ease: [0.215, 0.61, 0.355, 1], }, opacity: { delay: 0.2 + index * 0.025, duration: 0.18, }, y: { delay: 0.18 + index * 0.025, duration: 0.5, ease: [0.215, 0.61, 0.355, 1], }, }, }), shredded: { pathLength: 1, opacity: 1, y: 0, }, }); const isShredReady = (state: ShredState) => state === "idle" || state === "preview"; const isShredDisabled = (state: ShredState) => state === "shredding" || state === "shredded"; export function PaperShredButton() { const [shredState, setShredState] = useState("idle"); const shouldReduceMotion = Boolean(useReducedMotion()); const shredTimeoutRef = useRef(null); const pathVariants = useMemo( () => createPathVariants(shouldReduceMotion), [shouldReduceMotion] ); const documentTransition = useMemo( () => createDocumentTransition(shredState, shouldReduceMotion), [shredState, shouldReduceMotion] ); const buttonTransition = useMemo( () => shouldReduceMotion ? QUICK_TRANSITION : { duration: 0.18, ease: [0.215, 0.61, 0.355, 1] as const }, [shouldReduceMotion] ); const iconTransition = useMemo( () => shouldReduceMotion ? QUICK_TRANSITION : { duration: 0.3, ease: [0.215, 0.61, 0.355, 1] as const }, [shouldReduceMotion] ); const clearShredTimeout = useCallback(() => { if (shredTimeoutRef.current === null) { return; } window.clearTimeout(shredTimeoutRef.current); shredTimeoutRef.current = null; }, []); useEffect(() => { return clearShredTimeout; }, [clearShredTimeout]); const handlePreviewStart = useCallback(() => { setShredState((currentState) => { if (currentState !== "idle") { return currentState; } return "preview"; }); }, []); const handlePreviewEnd = useCallback(() => { setShredState((currentState) => { if (currentState !== "preview") { return currentState; } return "idle"; }); }, []); const handleShred = useCallback(() => { if (!isShredReady(shredState)) { return; } clearShredTimeout(); setShredState("shredding"); shredTimeoutRef.current = window.setTimeout(() => { setShredState("shredded"); shredTimeoutRef.current = window.setTimeout(() => { setShredState("idle"); shredTimeoutRef.current = null; }, RESET_DELAY_MS); }, shouldReduceMotion ? REDUCED_MOTION_SHRED_COMPLETE_DELAY : SHRED_COMPLETE_DELAY); }, [clearShredTimeout, shredState, shouldReduceMotion]); return (

حذف

); } export default PaperShredButton;