first

src/components/header/Auth.tsx

@@ -0,0 +1,25 @@
+import Button from "../Button";
+
+const Auth = () => {
+  const isAuth = false;
+  const username = "Name";
+
+  return (
+    <>
+      <div className="flex gap-4 py-2 pr-6 text-black col-span-2 justify-end">
+        {isAuth ? (
+          <>
+            <p>{username}</p>
+            <div className="rounded-full w-10 h-10 bg-[#E2E2DC] overflow-clip">
+              {/* <img src="" alt="avatar" className="bg-[#E2E2DC]" /> */}
+            </div>
+          </>
+        ) : (
+          <Button buttonType="cta" text="Login" />
+        )}
+      </div>
+    </>
+  );
+};
+
+export default Auth;

src/components/header/Header.tsx

@@ -0,0 +1,26 @@
+import { Outlet } from "react-router-dom";
+import Logo from "./Logo";
+import Location from "./Location";
+import Auth from "./Auth";
+import Navbar from "./Navbar";
+import useModal from "../../store/useModal";
+
+const Header = () => {
+  const { modal } = useModal();
+  return (
+    <>
+      {modal}
+      <header className="bg-white w-full text-white grid grid-cols-6 text-sm">
+        <div className="flex gap-4 col-span-2">
+          <Logo />
+          <Location />
+        </div>
+        <Navbar />
+        <Auth />
+      </header>
+      <Outlet />
+    </>
+  );
+};
+
+export default Header;

src/components/header/Location.tsx

@@ -0,0 +1,12 @@
+import LocationIcon from "../icons/LocationIcon";
+
+const Location = () => {
+  return (
+    <div className="text-[#73787C] flex gap-1 items-center">
+      <LocationIcon />
+      <p className="">Dubai</p>
+    </div>
+  );
+};
+
+export default Location;

src/components/header/Logo.tsx

@@ -0,0 +1,11 @@
+import LogoIcon from "../icons/LogoIcon";
+
+const Logo = () => {
+  return (
+    <div className="text-[#0D1922] py-4 px-6 border-r border-r-[#F3F3F2]">
+      <LogoIcon />
+    </div>
+  );
+};
+
+export default Logo;

src/components/header/Navbar.tsx

@@ -0,0 +1,15 @@
+const tabs = ["Masterplan", "Search", "Favorites", "Company"];
+
+const Navbar = () => {
+  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>
+      ))}
+    </nav>
+  );
+};
+
+export default Navbar;