Fixed Tab redirection issue in interview prep

Author: Khushalsarode

src/pages/interview-prep/PracticeTab.tsx

@@ -37,10 +37,11 @@ interface PracticeStats {
 }
 
 interface PracticeTabProps {
-    mockInterviewQuestions?: MockQuestion[]
-    onTabChange?: (tab: string) => void
+  mockInterviewQuestions?: MockQuestion[];
+  onTabChange?: (tab: "overview" | "technical" | "behavioral" | "companies" | "practice") => void;
 }
 
+
 const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }
 const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.1 } } }
 const scaleIn = { hidden: { scale: 0.8, opacity: 0 }, visible: { scale: 1, opacity: 1, transition: { duration: 0.5 } } }
@@ -188,11 +189,12 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
         })
     }
 
-    const handleTabNavigation = (tab: string) => {
-        if (onTabChange) {
-            onTabChange(tab)
-        }
+    const handleTabNavigation = (tab: "overview" | "technical" | "behavioral" | "companies" | "practice") => {
+    if (onTabChange) {
+        onTabChange(tab)
     }
+}
+
 
     const progressPercentage = allQuestions.length > 0 ? (practiceStats.totalCompleted / allQuestions.length) * 100 : 0
 

src/pages/interview-prep/index.tsx

@@ -1138,54 +1138,57 @@ function InterviewPrepContent({
           </div>
         </div>
 
-        {/* Tab Content */}
-  <div className="interview-prep-page max-w-6xl mx-auto px-4 py-12">
-          {/* Overview Tab */}
-          {activeTab === "overview" && (
-            <OverviewTab
-              toggleTips={toggleTips}
-              toggleQuestions={toggleQuestions}
-              showTips={showTips}
-              showQuestions={showQuestions}
-              setActiveTab={setActiveTab}
-            />
-          )}
+{/* Tab Content */}
+<div className="interview-prep-page max-w-6xl mx-auto px-4 py-12">
+  {/* Overview Tab */}
+  {activeTab === "overview" && (
+    <OverviewTab
+      toggleTips={toggleTips}
+      toggleQuestions={toggleQuestions}
+      showTips={showTips}
+      showQuestions={showQuestions}
+      setActiveTab={setActiveTab}
+    />
+  )}
 
-          {/* Technical Tab */}
-          {activeTab === "technical" && (
-            <TechnicalTab
-              technicalResources={technicalResources}
-              practicePlatforms={practicePlatforms}
-              expandedCategories={expandedCategories}
-              toggleCategory={toggleCategory}
-            />
-          )}
+  {/* Technical Tab */}
+  {activeTab === "technical" && (
+    <TechnicalTab
+      technicalResources={technicalResources}
+      practicePlatforms={practicePlatforms}
+      expandedCategories={expandedCategories}
+      toggleCategory={toggleCategory}
+    />
+  )}
 
-          {/* Behavioral Tab */}
-          {activeTab === "behavioral" && (
-            <BehavioralTab
-              behavioralQuestions={behavioralQuestions}
-              expandedCategories={expandedCategories}
-              toggleCategory={toggleCategory}
-            />
-          )}
+  {/* Behavioral Tab */}
+  {activeTab === "behavioral" && (
+    <BehavioralTab
+      behavioralQuestions={behavioralQuestions}
+      expandedCategories={expandedCategories}
+      toggleCategory={toggleCategory}
+    />
+  )}
 
-          {/* Companies Tab */}
-          {activeTab === "companies" && (
-            <CompaniesTab
-              companyTips={companyTips}
-              toggleTips={toggleTips}
-              toggleQuestions={toggleQuestions}
-              showTips={showTips}
-              showQuestions={showQuestions}
-            />
-          )}
+  {/* Companies Tab */}
+  {activeTab === "companies" && (
+    <CompaniesTab
+      companyTips={companyTips}
+      toggleTips={toggleTips}
+      toggleQuestions={toggleQuestions}
+      showTips={showTips}
+      showQuestions={showQuestions}
+    />
+  )}
 
-          {/* Practice Tab */}
-          {activeTab === "practice" && (
-            <PracticeTab mockInterviewQuestions={mockInterviewQuestions} />
-          )}
-        </div>
+  {/* Practice Tab */}
+  {activeTab === "practice" && (
+    <PracticeTab
+      mockInterviewQuestions={mockInterviewQuestions}
+      onTabChange={setActiveTab}  // ✅ pass the function here
+    />
+  )}
+</div>
 
         {/* Call to Action */}
         <motion.section