sync Tabs like CodeGroups

fern-api · Aug 1, 2024 · f0959e2 · f0959e2
1 parent b121067
commit f0959e2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 45 deletions.
diff --git a/packages/ui/app/src/mdx/components/code/CodeGroup.tsx b/packages/ui/app/src/mdx/components/code/CodeGroup.tsx
@@ -49,13 +49,7 @@ export const CodeGroup: React.FC<React.PropsWithChildren<CodeGroup.Props>> = ({
     }
 
     return (
-        <Tabs.Root
-            className={containerClass}
-            onValueChange={(value) => {
-                setSelected({ value });
-            }}
-            value={selected}
-        >
+        <Tabs.Root className={containerClass} onValueChange={setSelected} value={selected}>
             <div className="rounded-t-[inherit] bg-tag-default-soft">
                 <div className="mx-px flex min-h-10 items-center justify-between shadow-[inset_0_-1px_0_0] shadow-border-default">
                     <Tabs.List className="flex min-h-10" asChild>

diff --git a/packages/ui/app/src/mdx/components/tabs/Tabs.tsx b/packages/ui/app/src/mdx/components/tabs/Tabs.tsx
@@ -1,9 +1,8 @@
-import { CopyToClipboardButton } from "@fern-ui/components";
-import { Link1Icon } from "@radix-ui/react-icons";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import { slug } from "github-slugger";
 import { useRouter } from "next/router";
-import { FC, ReactNode, useEffect, useState } from "react";
+import { FC, ReactNode, useEffect } from "react";
+import { useTabSelection } from "../../hooks";
 
 export interface TabProps {
     title: string;
@@ -14,55 +13,42 @@ export interface TabProps {
 export interface TabGroupProps {
     tabs: TabProps[];
     toc?: boolean;
+    groupId?: string;
 }
 
-export const TabGroup: FC<TabGroupProps> = ({ tabs, toc: parentToc = true }) => {
-    const [url, setUrl] = useState("");
-    const [activeTab, setActiveTab] = useState("0");
+export const TabGroup: FC<TabGroupProps> = ({ tabs, groupId, toc: parentToc = true }) => {
     const router = useRouter();
     const anchor = router.asPath.split("#")[1];
-
-    useEffect(() => {
-        if (typeof window !== "undefined") {
-            const copyTab = tabs[parseInt(activeTab)];
-            if (copyTab) {
-                const currentUrl = `${window.location.origin}${window.location.pathname}#${slug(copyTab.title)}`;
-                setUrl(currentUrl);
-            }
-        }
-    }, [activeTab, tabs]);
+    const { selected, setSelected } = useTabSelection({ groupId });
 
     useEffect(() => {
         if (anchor != null) {
             const anchorTab = tabs.findIndex((tab) => slug(tab.title) === anchor);
 
             if (anchorTab >= 0) {
-                setActiveTab(anchorTab.toString());
+                setSelected(anchorTab.toString());
             }
         }
     }, [anchor, tabs]);
 
     return (
-        <RadixTabs.Root value={activeTab} onValueChange={setActiveTab}>
-            <div className="flex justify-between">
-                <RadixTabs.List className="border-default mb-6 mt-4 flex gap-4 border-b first:-mt-3">
-                    {tabs.map(({ title, toc = parentToc }, idx) => {
-                        const id = slug(title);
-                        return (
-                            <RadixTabs.Trigger key={idx} value={idx.toString()} asChild>
-                                <h6
-                                    className="text-default -mb-px flex max-w-max cursor-pointer scroll-mt-content-padded whitespace-nowrap border-b border-transparent pb-2.5 pt-3 text-sm font-semibold leading-6 hover:border-default data-[state=active]:t-accent data-[state=active]:border-accent"
-                                    id={id}
-                                    data-anchor={toc ? id : undefined}
-                                >
-                                    {title}
-                                </h6>
-                            </RadixTabs.Trigger>
-                        );
-                    })}
-                </RadixTabs.List>
-                <CopyToClipboardButton icon={Link1Icon} className="ml-1" content={url} />
-            </div>
+        <RadixTabs.Root value={selected} onValueChange={setSelected}>
+            <RadixTabs.List className="border-default mb-6 mt-4 flex gap-4 border-b first:-mt-3">
+                {tabs.map(({ title, toc = parentToc }, idx) => {
+                    const id = slug(title);
+                    return (
+                        <RadixTabs.Trigger key={idx} value={idx.toString()} asChild>
+                            <h6
+                                className="text-default -mb-px flex max-w-max cursor-pointer scroll-mt-content-padded whitespace-nowrap border-b border-transparent pb-2.5 pt-3 text-sm font-semibold leading-6 hover:border-default data-[state=active]:t-accent data-[state=active]:border-accent"
+                                id={id}
+                                data-anchor={toc ? id : undefined}
+                            >
+                                {title}
+                            </h6>
+                        </RadixTabs.Trigger>
+                    );
+                })}
+            </RadixTabs.List>
             {tabs.map((tab, idx) => (
                 <RadixTabs.Content
                     key={idx}

diff --git a/packages/ui/app/src/mdx/hooks/useTabSelection.ts b/packages/ui/app/src/mdx/hooks/useTabSelection.ts
@@ -13,7 +13,7 @@ export const useTabSelection = ({ groupId }: { groupId?: string }) => {
         }
     }, [groupId, selectedGroup]);
 
-    const setSelected = ({ value }: { value: string }) => {
+    const setSelected = (value: string) => {
         if (groupId) {
             setGroups((prev) => {
                 return { ...prev, [groupId]: value };