swipeable tabs use url

src/components/swipeable-tabs.tsx

@@ -1,6 +1,7 @@
 import { FloatingIndicator, UnstyledButton, Box, Text, ScrollArea } from "@mantine/core";
 import { Carousel } from "@mantine/carousel";
 import { useState, useEffect, ReactNode, useRef } from "react";
+import { useRouter } from "@tanstack/react-router";
 
 interface TabItem {
   label: string;
@@ -15,7 +16,28 @@ interface SwipeableTabsProps {
 }
 
 function SwipeableTabs({ tabs, defaultTab = 0, onTabChange, scrollPosition }: SwipeableTabsProps) {
-  const [activeTab, setActiveTab] = useState(defaultTab);
+  const router = useRouter();
+  const search = router.state.location.search as any;
+
+  // manually update url tab w/o useNavigate
+  const updateUrlTab = (tabLabel: string) => {
+    if (typeof window === 'undefined') return;
+    
+    const url = new URL(window.location.href);
+    url.searchParams.set('tab', tabLabel);
+    window.history.replaceState(null, '', url.toString());
+  };
+  
+  const getInitialTab = () => {
+    const urlTab = search?.tab;
+    if (typeof urlTab === 'string') {
+      const tabIndex = tabs.findIndex(tab => tab.label.toLowerCase() === urlTab.toLowerCase());
+      return tabIndex !== -1 ? tabIndex : defaultTab;
+    }
+    return defaultTab;
+  };
+
+  const [activeTab, setActiveTab] = useState(getInitialTab);
   const [embla, setEmbla] = useState<any>(null);
   const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
   const [controlsRefs, setControlsRefs] = useState<Record<number, HTMLSpanElement | null>>({});
@@ -33,12 +55,18 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange, scrollPosition }: Sw
       const newIndex = embla.selectedScrollSnap();
       setActiveTab(newIndex);
       
-      // Update height based on active slide content
       const activeSlideRef = slideRefs.current[newIndex];
       if (activeSlideRef) {
         const height = activeSlideRef.scrollHeight;
         setActiveSlideHeight(height);
       }
+      
+      const tabLabel = tabs[newIndex]?.label.toLowerCase();
+      if (tabLabel) {
+        updateUrlTab(tabLabel);
+      }
+      
+      onTabChange?.(newIndex, tabs[newIndex]);
     };
 
     embla.on("select", onSelect);
@@ -48,7 +76,6 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange, scrollPosition }: Sw
     };
   }, [embla]);
 
-  // Update height when activeTab changes
   useEffect(() => {
     const activeSlideRef = slideRefs.current[activeTab];
     if (activeSlideRef) {
@@ -57,6 +84,17 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange, scrollPosition }: Sw
     }
   }, [activeTab]);
 
+  useEffect(() => {
+    const urlTab = search?.tab;
+    if (typeof urlTab === 'string') {
+      const tabIndex = tabs.findIndex(tab => tab.label.toLowerCase() === urlTab.toLowerCase());
+      if (tabIndex !== -1 && tabIndex !== activeTab) {
+        setActiveTab(tabIndex);
+        embla?.scrollTo(tabIndex);
+      }
+    }
+  }, [search?.tab, tabs, activeTab, embla]);
+
   useEffect(() => {
     if (scrollPosition) {
       setIsSticky(scrollPosition.y > stickyThreshold);
@@ -96,6 +134,9 @@ function SwipeableTabs({ tabs, defaultTab = 0, onTabChange, scrollPosition }: Sw
       setActiveTab(index);
       embla?.scrollTo(index);
       onTabChange?.(index, tabs[index]);
+      
+      const tabLabel = tabs[index].label.toLowerCase();
+      updateUrlTab(tabLabel);
     }
   };