add "order details" bottom sheet

src/hooks/useSwipeUp.ts

@@ -0,0 +1,52 @@
+import { useRef, useState, useCallback } from "react";
+
+type Props = { isEnabled: boolean; swipeAction: () => void };
+
+export default function useSwipeUp({ isEnabled, swipeAction }: Props) {
+  // Swipe detection
+  const startYRef = useRef(0);
+  const [isSwiping, setIsSwiping] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  // Touch event handlers for swipe detection
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isEnabled) return;
+      startYRef.current = e.touches[0].clientY;
+      setIsSwiping(true);
+    },
+    [isEnabled],
+  );
+
+  /*
+  const handleTouchMove = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isSwiping) return;
+    },
+    [isSwiping],
+  );
+*/
+
+  const handleTouchEnd = useCallback(
+    (e: React.TouchEvent) => {
+      if (!isSwiping || !isEnabled) return;
+
+      const endY = e.changedTouches[0].clientY;
+      const deltaY = startYRef.current - endY;
+      const threshold = 70; // Threshold to detect a swipe up
+
+      if (deltaY > threshold) {
+        // Swipe up detected
+        swipeAction();
+      }
+
+      setIsSwiping(false);
+    },
+    [isSwiping, isEnabled],
+  );
+
+  return {
+    containerRef,
+    handleTouchStart,
+    handleTouchEnd,
+  };
+}