feat: tab navigation

web/src/components/Home/TopBar/index.tsx

@@ -0,0 +1,29 @@
+import { type FC } from "react";
+import { barItems } from "../tabs";
+
+export interface ITopBarProps {
+  activeTab: string;
+  onChangeTab: (tab: string) => void;
+}
+
+const TopBar: FC<ITopBarProps> = ({ activeTab, onChangeTab }) => {
+  return (
+    <div className="sm:hidden flex w-full overflow-x-auto sm:overflow-x-visible max-w-full min-w-full sm:justify-center sm:space-x-4 no-scrollbar shadow-md shadow-gray-300 dark:shadow-gray-700 dark:bg-black/70 bg-white/70 pt-14">
+      {barItems.map((item) => (
+        <div
+          key={item.tab}
+          onClick={() => onChangeTab(item.tab)}
+          className={`flex-shrink-0 transition-all border-b-4 px-4 py-2 min-w-[120px] sm:min-w-0 sm:flex-1 flex items-center justify-center cursor-pointer select-none whitespace-nowrap text-sm font-medium ${
+            item.tab === activeTab
+              ? " border-b-4 border-b-blue-500 text-blue-500"
+              : " border-b-transparent text-gray-500"
+          }`}
+        >
+          {item.title}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TopBar;