"use client"; import { useEffect, useRef, useState, type ReactNode } from "react"; import { X } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { Drawer as DrawerPrimitive } from "vaul"; import { CartDemo, FieldDemo } from "./drawer-buttons-field"; import { cn } from "@/lib/utils"; import { buttonVariants } from "@/components/ui/button"; import { Drawer, DrawerClose, DrawerDescription, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawerContentClassName, } from "./drawer-buttons-drawer"; type DrawerRevealSide = "left" | "right"; type MotionDrawerContentProps = { children: ReactNode; className?: string; open: boolean; side: DrawerRevealSide; transitionDuration: number; }; const DRAWER_REVEAL_DURATION_SECONDS = 0.48; const drawerRevealEase = [0.22, 1, 0.36, 1] as const; const useAnimatedDrawerState = (transitionDuration: number) => { const [mountedOpen, setMountedOpen] = useState(false); const [visualOpen, setVisualOpen] = useState(false); const closeTimerRef = useRef | null>(null); const visualTimerRef = useRef | null>(null); const clearTimers = () => { if (closeTimerRef.current) { clearTimeout(closeTimerRef.current); closeTimerRef.current = null; } if (visualTimerRef.current) { clearTimeout(visualTimerRef.current); visualTimerRef.current = null; } }; const handleOpenChange = (nextOpen: boolean) => { clearTimers(); if (nextOpen) { setMountedOpen(true); visualTimerRef.current = setTimeout(() => { setVisualOpen(true); visualTimerRef.current = null; }, 0); return; } setVisualOpen(false); closeTimerRef.current = setTimeout(() => { setMountedOpen(false); closeTimerRef.current = null; }, transitionDuration * 1000); }; useEffect(() => clearTimers, []); return { mountedOpen, visualOpen, handleOpenChange, }; }; const getDrawerRevealTransform = (side: DrawerRevealSide, open: boolean) => { if (open) { return "translate3d(0px, 0px, 0px) rotateY(0deg) scaleY(1)"; } const rotationDirection = side === "left" ? 1 : -1; const x = side === "left" ? "calc(-100% - 48px)" : "calc(100% + 48px)"; return `translate3d(${x}, 0px, -280px) rotateY(${ rotationDirection * 22 }deg) scaleY(0.74)`; }; const MotionDrawerContent = ({ children, className, open, side, transitionDuration, }: MotionDrawerContentProps) => { const shouldReduceMotion = useReducedMotion(); const transform = shouldReduceMotion ? "translate3d(0px, 0px, 0px) rotateY(0deg) scaleY(1)" : getDrawerRevealTransform(side, open); return (

{children}

); }; export const DrawerButtons = () => { const paymentDrawer = useAnimatedDrawerState(DRAWER_REVEAL_DURATION_SECONDS); const cartDrawer = useAnimatedDrawerState(DRAWER_REVEAL_DURATION_SECONDS); return (

جزئیات پرداخت اطلاعات تسویه و صورتحساب را وارد کنید.

خلاصهٔ سبد کالاها، تعداد، تخفیف و مبلغ کل را ببینید.

); }; export default DrawerButtons;