"use client"; import type { TargetAndTransition, Transition } from "motion/react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"; export type Status = "idle" | "scanning" | "done"; type ScanBarProps = { transition: Transition; z: number; }; const SCAN_DURATION_MS = 5000; const REDUCED_SCAN_DURATION_MS = 900; const SCAN_EXIT_DURATION_SECONDS = 0.4; const REDUCED_SCAN_EXIT_DURATION_SECONDS = 0.2; const DONE_RESET_DELAY_MS = 1100; const SCAN_BAR_TRAVEL = 132; const LABELS: Record = { idle: "اسکن", scanning: "در حال اسکن", done: "انجام شد", }; const SCAN_MOVE_TIMES = [0, 0.1, 0.45, 0.55, 0.9, 1]; const SCAN_CONTAINER_TIMES = [0, 0.55, 1]; const DOCUMENT_ROTATE_Y = [0, 0, 180, 180, 360, 360]; const SCAN_BAR_Y = [0, 0, 1, 1, 0, 0].map( (progress) => progress * SCAN_BAR_TRAVEL ); const EASE_OUT = [0.215, 0.61, 0.355, 1] as const; const EASE_IN_OUT = [0.645, 0.045, 0.355, 1] as const; export function ScanBar({ transition, z }: ScanBarProps) { return (

); } export function ScanningDocument({ reduceMotion, }: { reduceMotion: boolean; }) { const scanCycle = useMemo( () => ({ duration: reduceMotion ? REDUCED_SCAN_DURATION_MS / 1000 - REDUCED_SCAN_EXIT_DURATION_SECONDS : SCAN_DURATION_MS / 1000 - SCAN_EXIT_DURATION_SECONDS, ease: EASE_IN_OUT, times: SCAN_MOVE_TIMES, }), [reduceMotion] ); const scanContainerExit = useMemo( () => ({ scaleX: 0.16, scaleY: reduceMotion ? 0.12 : 0, y: 30, opacity: 0, transition: { duration: reduceMotion ? REDUCED_SCAN_EXIT_DURATION_SECONDS : SCAN_EXIT_DURATION_SECONDS, ease: EASE_OUT, }, }), [reduceMotion] ); const scanContainerTransition = useMemo( () => ({ duration: reduceMotion ? 0.2 : 0.5, ease: EASE_OUT, times: SCAN_CONTAINER_TIMES, }), [reduceMotion] ); return (

); } export function Icon({ size = 24, color = "currentColor", }: { size?: number; color?: string; }) { const clipId = useId().replace(/:/g, ""); return ( ); } export function ScanDocumentButton() { const [status, setStatus] = useState("idle"); const scanTimeoutRef = useRef(null); const reduceMotion = useReducedMotion() ?? false; const clearScanTimeout = useCallback(() => { if (scanTimeoutRef.current === null) { return; } window.clearTimeout(scanTimeoutRef.current); scanTimeoutRef.current = null; }, []); useEffect(() => { return clearScanTimeout; }, [clearScanTimeout]); const handleScan = useCallback(() => { if (status !== "idle") { return; } setStatus("scanning"); clearScanTimeout(); const scanMs = reduceMotion ? REDUCED_SCAN_DURATION_MS : SCAN_DURATION_MS; scanTimeoutRef.current = window.setTimeout(() => { setStatus("done"); scanTimeoutRef.current = window.setTimeout(() => { setStatus("idle"); scanTimeoutRef.current = null; }, DONE_RESET_DELAY_MS); }, scanMs); }, [clearScanTimeout, reduceMotion, status]); return (

{status === "scanning" ? ( ) : null}

); } export default function ScanDocument() { return (

); }