fix: change tabs with useState

frontend/src/app/layout.tsx

@@ -6,9 +6,6 @@ import Footer from '../components/shared/footer';
 import envConfig from '../constants/envConfig';
 import { GleapInit } from '@/src/components/shared/gleap';
 
-
-
-
 const inter = Mulish({
   subsets: ['latin'],
   weight: ['200', '400', '500', '600', '700'],

frontend/src/components/memories/memory.tsx

@@ -1,10 +1,8 @@
 import { Memory as MemoryType } from '@/src/types/memory.types';
 import moment from 'moment';
-import Summary from './summary/sumary';
-import Tabs from './tabs';
-import Transcription from './transcript/transcription';
 import { SearchParamsTypes } from '@/src/types/params.types';
 import { DEFAULT_TITLE_MEMORY } from '@/src/constants/memory';
+import MemoryWithTabs from './summary/memory-with-tabs';
 
 interface MemoryProps {
   memory: MemoryType;
@@ -30,17 +28,7 @@ export default function Memory({ memory, searchParams }: MemoryProps) {
                 memory.structured.category.slice(1)}
             </span>
           </div>
-          <Tabs currentTab={currentTab} />
-          <div className="">
-            {currentTab === 'sum' ? (
-              <Summary memory={memory} />
-            ) : (
-              <Transcription
-                transcript={memory.transcript_segments}
-                externalData={memory.external_data}
-              />
-            )}
-          </div>
+          <MemoryWithTabs memory={memory} />
         </div>
         <div className="absolute top-0 z-10 h-full w-full  select-none blur-3xl">
           <div className="absolute right-[0rem] top-[-70px] h-[10rem] w-[100%] bg-[#1758e74f] opacity-30" />

frontend/src/components/memories/summary/memory-with-tabs.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Fragment, useState } from 'react';
+import Tabs from '../tabs';
+import Summary from './sumary';
+import Transcription from '../transcript/transcription';
+import { Memory } from '@/src/types/memory.types';
+
+interface MemoryWithTabsProps {
+  memory: Memory;
+}
+
+export default function MemoryWithTabs({ memory }: MemoryWithTabsProps) {
+  const [currentTab, setCurrentTab] = useState('sum');
+  return (
+    <Fragment>
+      <Tabs currentTab={currentTab} setCurrentTab={setCurrentTab} />
+      <div className="">
+        {currentTab === 'sum' ? (
+          <Summary memory={memory} />
+        ) : (
+          <Transcription
+            transcript={memory.transcript_segments}
+            externalData={memory.external_data}
+          />
+        )}
+      </div>
+    </Fragment>
+  );
+}

frontend/src/components/memories/tabs.tsx

@@ -1,24 +1,29 @@
-import Link from 'next/link';
+'use client';
 
-export default function Tabs({ currentTab }: { currentTab: string }) {
+interface TabsProps {
+  currentTab: string;
+  setCurrentTab: (tab: string) => void;
+}
+
+export default function Tabs({ currentTab, setCurrentTab }: TabsProps) {
   return (
     <div className="mt-8 flex border-y border-solid border-zinc-800 text-base md:mt-10 md:text-lg">
-      <Link
-        href="?tab=trs"
+      <button
+        onClick={() => setCurrentTab('trs')}
         className={`${
           currentTab === 'trs' ? 'bg-zinc-800' : 'hover:bg-zinc-900'
         } w-full py-3 text-center transition-colors`}
       >
         Transcript
-      </Link>
-      <Link
-        href="?tab=sum"
+      </button>
+      <button
+        onClick={() => setCurrentTab('sum')}
         className={`${
           currentTab === 'sum' ? 'bg-zinc-800' : 'hover:bg-zinc-900'
         } w-full py-3 text-center transition-colors`}
       >
         Summary
-      </Link>
+      </button>
     </div>
   );
 }

frontend/src/components/shared/gleap.tsx

@@ -7,4 +7,4 @@ export const GleapInit: FC<{ children?: ReactNode }> = ({ children }) => {
     Gleap.initialize('TkYt8vtmccX6UBfSdo2I45lYYSEEC8Fn');
   });
   return <>{children}</>;
-};
+};