fix: Fix select dropdown rendering

src/components/TabBar.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { Link } from "react-router-dom"
+import React, { useEffect, useState } from "react"
+import { Link, useLocation } from "react-router-dom"
 
 interface TabBarProps {
     tabs: string[];
@@ -8,6 +8,16 @@ interface TabBarProps {
 }
 
 const TabBar: React.FC<TabBarProps> = ({ tabs, selectedTab, onSelectTab }) => {
+
+    const [currentTab, setCurrentTab] = useState(selectedTab);
+    const currentRoute = useLocation();
+
+    useEffect(() => {
+        const path = currentRoute.pathname.split("/")[1]
+        const tabname = path.charAt(0).toUpperCase() + path.slice(1)
+        setCurrentTab(tabname)
+    }, [currentRoute])
+
     return (
         <div className="-mt-11">
             <div className="sm:hidden">
@@ -17,7 +27,7 @@ const TabBar: React.FC<TabBarProps> = ({ tabs, selectedTab, onSelectTab }) => {
                 <select
                     id="Tab"
                     className="w-full rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
-                    value={selectedTab}
+                    value={currentTab}
                     onChange={(e) => onSelectTab(e.target.value)}
                 >
                     {tabs.map((tab) => (

tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/components/Banner.tsx","./src/components/Characters.tsx","./src/components/TabBar.tsx","./src/routes/Root.tsx"],"version":"5.6.2"}
+{"root":["./src/loaders.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/Banner.tsx","./src/components/CharacterDetail.tsx","./src/components/Characters.tsx","./src/components/EpisodeDetail.tsx","./src/components/Episodes.tsx","./src/components/LocationDetail.tsx","./src/components/Locations.tsx","./src/components/Pagination.tsx","./src/components/TabBar.tsx","./src/routes/Root.tsx"],"version":"5.6.2"}