fix(summary): disable links when in other tabs

src/components/common/Tabs.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { Resources } from "contentlayer/generated";
-import React, { SetStateAction, useState } from "react";
+import React, { SetStateAction } from "react";
 import TranscriptTabContent from "../individual-transcript/TranscriptTabContent";
 import NavigationByWords from "../explore/NavigationByWords";
 import { NavigationList } from "@/utils";
 import useLang from "@/hooks/useLang";
 import useTranslations from "@/hooks/useTranslations";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 
 const Tabs = ({
   summary,
@@ -16,21 +16,22 @@ const Tabs = ({
   currentHeading,
   groupedHeading,
   setCurrentHeading,
+  openTabs,
+  setOpenTabs,
 }: {
   summary?: string;
   markdown: string;
   extraInfo?: Resources[];
   currentHeading?: string;
   groupedHeading?: NavigationList[];
   setCurrentHeading?: React.Dispatch<SetStateAction<string>>;
+  openTabs: "transcript" | "summary" | "extraInfo";
+  setOpenTabs: React.Dispatch<SetStateAction<"transcript" | "summary" | "extraInfo">>;
 }) => {
   const lang = useLang();
   const t = useTranslations(lang);
   const currentRoute = useParams();
   const slug = Array.isArray(currentRoute?.slug) ?  currentRoute.slug.slice(0,currentRoute.slug.length - 1).join("/") : "";
-  const [openTabs, setOpenTabs] = useState<
-    "transcript" | "summary" | "extraInfo"
-  >("transcript");
 
   return (
     <div className="flex flex-col relative">
@@ -63,6 +64,7 @@ const Tabs = ({
           <NavigationByWords
             currentGroup={currentHeading || ""}
             navigationList={groupedHeading}
+            currentTab={openTabs}
             screen="mobile"
           />
         </div>

src/components/explore/NavigationByWords.tsx

@@ -15,16 +15,19 @@ export interface IContentNavigation {
   navigationList: NavigationList[] | ExploreGroupedData[]; // Account for Explore Page and Transcript Page
   screen?: "mobile" | "desktop";
   className?: string;
+  currentTab?:  "transcript" | "summary" | "extraInfo";
 }
 const NavigationByWords = ({
   currentGroup,
+  currentTab,
   navigationList,
   screen,
   className,
 }: IContentNavigation) => {
 
   const selectRef = useRef<HTMLSelectElement>(null);
   const linkRef = useRef<HTMLAnchorElement>(null);
+  const isSummaryTab =  currentTab === "summary";
   const onOptionsChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
     const value = e.target.value;
     if (linkRef.current) {
@@ -51,6 +54,7 @@ const NavigationByWords = ({
           )}
         >
           {navigationList.map((nav) => (
+            !isSummaryTab?
               <Link
                 key={nav?.slug}
                 href={`#${nav.slug}`}
@@ -65,7 +69,21 @@ const NavigationByWords = ({
                 )}
               >
                 {nav?.name}
-              </Link>
+              </Link>:
+              <span
+                key={nav?.slug}
+                className={twMerge(
+                  "flex text-sm 2xl:text-lg leading-5 cursor-not-allowed",
+                  createContentSlug(currentGroup) == nav?.slug
+                    ? "text-orange-custom-100  rounded-[4px] font-semibold"
+                    : "hover:text-orange-custom-100",
+                  nav?.nested === true
+                    ? "pl-4 pt-2 2xl:pt-3.5"
+                    : "pt-3 2xl:pt-5",
+                )}
+              >
+                {nav?.name}
+              </span>
             ))}
         </div>
       )}

src/components/individual-transcript/IndividualTranscript.tsx

@@ -21,7 +21,7 @@ const IndividualTranscript = ({
   transcript: Transcript;
 }) => {
   const [currentHeading, setCurrentHeading] = useState("");
-
+  const [openTabs, setOpenTabs] = useState<"transcript" | "summary" | "extraInfo">("transcript")
   const lang = useLang();
   const t = useTranslations(lang);
 
@@ -59,6 +59,8 @@ const IndividualTranscript = ({
                 extraInfo={transcript?.additional_resources}
                 currentHeading={currentHeading}
                 groupedHeading={allHeadings}
+                openTabs={openTabs}
+                setOpenTabs={setOpenTabs}
                 setCurrentHeading={setCurrentHeading}
               />
             </div>
@@ -73,6 +75,7 @@ const IndividualTranscript = ({
               `!w-full rounded-xl max-h-[calc(90vh-var(--header-height))]`,
               allHeadings.length < 1 && "!invisible",
             )}
+            currentTab={openTabs}
             screen="desktop"
           />
         </div>