sticky tabs

src/components/swipeable-tabs.tsx

@@ -1,6 +1,6 @@
 import { FloatingIndicator, UnstyledButton, Box, Text, ScrollArea } from "@mantine/core";
 import { Carousel } from "@mantine/carousel";
-import { useState, useEffect, ReactNode } from "react";
+import { useState, useEffect, ReactNode, useRef } from "react";
 
 interface TabItem {
   label: string;
@@ -11,13 +11,18 @@ interface SwipeableTabsProps {
   tabs: TabItem[];
   defaultTab?: number;
   onTabChange?: (index: number, tab: TabItem) => void;
+  scrollPosition?: { x: number; y: number };
 }
 
-function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps) {
+function SwipeableTabs({ tabs, defaultTab = 0, onTabChange, scrollPosition }: SwipeableTabsProps) {
   const [activeTab, setActiveTab] = useState(defaultTab);
   const [embla, setEmbla] = useState<any>(null);
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
   const [controlsRefs, setControlsRefs] = useState<Record<number, HTMLSpanElement | null>>({});
+  const [isSticky, setIsSticky] = useState(false);
+  const tabsRef = useRef<HTMLDivElement | null>(null);
+  const originalPositionRef = useRef<number | null>(null);
+  const stickyThreshold = 0;
 
   useEffect(() => {
     if (!embla) return;
@@ -34,6 +39,40 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps
     };
   }, [embla]);
 
+  useEffect(() => {
+    if (scrollPosition) {
+      setIsSticky(scrollPosition.y > stickyThreshold);
+      return;
+    }
+
+    const scrollWrapper = document.getElementById('scroll-wrapper');
+    let viewport = scrollWrapper!.querySelector('.mantine-ScrollArea-viewport') as HTMLElement;
+
+    const handleScroll = () => {
+      if (!tabsRef.current) return;
+      
+      const scrollTop = viewport.scrollTop;
+      const viewportRect = viewport.getBoundingClientRect();
+      
+      if (originalPositionRef.current === null && !isSticky) {
+        const tabsRect = tabsRef.current.getBoundingClientRect();
+        originalPositionRef.current = tabsRect.top - viewportRect.top + scrollTop;
+      }  
+
+      setIsSticky(
+        originalPositionRef.current !== null 
+          && scrollTop >= (originalPositionRef.current - viewportRect.top - stickyThreshold)
+      );
+    };
+
+    handleScroll();
+    viewport.addEventListener('scroll', handleScroll, { passive: true });
+    
+    return () => {
+      viewport.removeEventListener('scroll', handleScroll);
+    };
+  }, [stickyThreshold, isSticky, scrollPosition]);
+
   const handleTabChange = (index: number) => {
     if (index !== activeTab && index >= 0 && index < tabs.length) {
       setActiveTab(index);
@@ -49,12 +88,24 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange }: SwipeableTabsProps
 
   return (
     <Box>
+      {isSticky && (
+        <Box style={{ height: '60px' }} /> 
+      )}
       <Box
-        ref={setRootRef}
-        pos="relative"
+        ref={(node) => {
+          setRootRef(node);
+          tabsRef.current = node;
+        }}
+        pos={isSticky ? "fixed" : "relative"}
         style={{
           display: 'flex',
           marginBottom: 'var(--mantine-spacing-md)',
+          top: isSticky ? 0 : 'auto',
+          left: isSticky ? 0 : 'auto',
+          right: isSticky ? 0 : 'auto',
+          zIndex: 100,
+          backgroundColor: 'var(--mantine-color-body)',
+          transition: 'all 200ms ease',
         }}
       >
         <FloatingIndicator