markers, map, button states

src/components/header/Navbar.tsx

@@ -1,12 +1,48 @@
-const tabs = ["Masterplan", "Search", "Favorites", "Company"];
+import { useState } from "react";
+import { Tab } from "../../types/tab";
+import NavbarTab from "./NavbarTab";
+
+const tabs: Tab[] = [
+  {
+    value: "Masterplan",
+    id: "1",
+    count: 0,
+  },
+  {
+    value: "Search",
+    id: "2",
+    count: 0,
+  },
+  {
+    value: "Favorites",
+    id: "3",
+    count: 3,
+  },
+  {
+    value: "Company",
+    id: "4",
+    count: 0,
+  },
+];
 
 const Navbar = () => {
+  const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
+  const onTabClick = (tab: Tab) => {
+    setSelectedTab(tab);
+  };
+
   return (
     <nav className="flex text-[#73787C] self-center col-span-2 justify-center">
       {tabs.map((tab) => (
-        <button key={tab} className="px-4 py-[10px]">
-          {tab}
-        </button>
+        <NavbarTab
+          key={tab.id}
+          tab={tab}
+          isSelected={selectedTab?.id === tab.id}
+          onClick={onTabClick}
+        />
+        // <button key={tab} className="px-4 py-[10px]">
+        //   {tab}
+        // </button>
       ))}
     </nav>
   );

src/components/header/NavbarTab.tsx

@@ -0,0 +1,33 @@
+import { Tab } from "../../types/tab";
+
+interface NavbarTabProps {
+  tab: Tab;
+  isSelected: boolean;
+  onClick: (tab: Tab) => void;
+}
+
+const NavbarTab = ({ tab, onClick, isSelected = false }: NavbarTabProps) => {
+  return (
+    <button
+      className="px-4 text-[#73787C] hover:text-black relative"
+      onClick={() => onClick(tab)}
+    >
+      <div
+        className={`py-[10px]   border-b  transition-all duration-300 ${
+          isSelected
+            ? "border-b-[#00BED7]"
+            : "border-b-transparent hover:border-b-[#E2E2DC] active:border-b-[#00BED7]"
+        }`}
+      >
+        {tab.value}
+      </div>
+      {tab.count !== 0 && (
+        <div className="absolute top-0 right-0 w-4 h-4 bg-[#00BED7] rounded-full text-white text-[10px] flex items-center justify-center">
+          {tab.count}
+        </div>
+      )}
+    </button>
+  );
+};
+
+export default NavbarTab;