fix: tab navigation from practice tab to other tabs in interview prep page with type safety

Author: Srijatalamarla

src/pages/interview-prep/PracticeTab.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import type { TabType } from "./index";
 
 interface MockQuestion {
   id: string;
@@ -44,7 +45,7 @@ interface PracticeStats {
 
 interface PracticeTabProps {
   mockInterviewQuestions?: MockQuestion[];
-  onTabChange?: (tab: string) => void;
+  onTabChange?: (tab: TabType) => void;
 }
 
 const fadeIn = {
@@ -220,7 +221,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({
     });
   };
 
-  const handleTabNavigation = (tab: string) => {
+  const handleTabNavigation = (tab: TabType) => {
     if (onTabChange) {
       onTabChange(tab);
     }

src/pages/interview-prep/index.tsx

@@ -27,10 +27,15 @@ const staggerContainer = {
   },
 };
 
+type TabType =
+  | "overview"
+  | "technical"
+  | "behavioral"
+  | "companies"
+  | "practice";
+
 const InterviewPrepPage: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<
-    "overview" | "technical" | "behavioral" | "companies" | "practice"
-  >("overview");
+  const [activeTab, setActiveTab] = useState<TabType>("overview");
   const [expandedCategories, setExpandedCategories] = useState<{
     [key: string]: boolean;
   }>({});
@@ -1501,11 +1506,7 @@ function InterviewPrepContent({
   mockInterviewQuestions,
 }: {
   activeTab: string;
-  setActiveTab: React.Dispatch<
-    React.SetStateAction<
-      "overview" | "technical" | "behavioral" | "companies" | "practice"
-    >
-  >;
+  setActiveTab: React.Dispatch<React.SetStateAction<TabType>>;
   expandedCategories: { [key: string]: boolean };
   toggleCategory: (categoryIndex: number) => void;
   showTips: { [key: number]: boolean };
@@ -1654,7 +1655,10 @@ function InterviewPrepContent({
 
           {/* Practice Tab */}
           {activeTab === "practice" && (
-            <PracticeTab mockInterviewQuestions={mockInterviewQuestions} />
+            <PracticeTab
+              mockInterviewQuestions={mockInterviewQuestions}
+              onTabChange={setActiveTab}
+            />
           )}
         </div>
 
@@ -1702,3 +1706,4 @@ function InterviewPrepContent({
 }
 
 export default InterviewPrepPage;
+export type { TabType };