90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import { NavLink } from "react-router-dom";
|
|
import LocationIcon from "./icons/LocationIcon";
|
|
import Logo2Icon from "./icons/Logo2Icon";
|
|
import Button2 from "./Button2";
|
|
import BurgerIcon from "./icons/activities/BurgerIcon";
|
|
import useModal from "../store/useModal";
|
|
import NavbarModal from "./modals/NavbarModal";
|
|
import { useState } from "react";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
import useFavoritesStore from "../store/useFavoritesStore";
|
|
|
|
function Header() {
|
|
const [showNavbar, setShowNavbar] = useState<boolean>(false);
|
|
const { setModal } = useModal();
|
|
const { favoriteUnits } = useFavoritesStore();
|
|
|
|
function handleClick() {
|
|
setShowNavbar((prev) => !prev);
|
|
|
|
if (!showNavbar) {
|
|
setModal(<NavbarModal />);
|
|
} else {
|
|
setModal(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="fixed top-0 left-0 w-full flex justify-between bg-white z-50">
|
|
<div className="flex">
|
|
<div className="px-6 py-4 border-r border-[#E2E2DC]">
|
|
<Logo2Icon />
|
|
</div>
|
|
<div className="text-[#0D192266] flex gap-1 items-center px-4 py-[18px]">
|
|
<LocationIcon className="w-5 h-5" />
|
|
<p className="text-sm">Dubai</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 max-xl:hidden">
|
|
<NavLink to="/masterplan" className="p-4">
|
|
Map
|
|
</NavLink>
|
|
<div className="w-px h-3 bg-[#E2E2DC]"></div>
|
|
<NavLink to="/unit-types" className="p-4">
|
|
Unit Types
|
|
</NavLink>
|
|
<div className="w-px h-3 bg-[#E2E2DC]"></div>
|
|
<NavLink to="/about" className="p-4">
|
|
About IRTH
|
|
</NavLink>
|
|
<div className="w-px h-3 bg-[#E2E2DC]"></div>
|
|
<NavLink to="/favorites" className="p-4 relative">
|
|
Favorites{" "}
|
|
{favoriteUnits.length > 0 && (
|
|
<div className="absolute right-0 top-2 w-4 h-4 bg-[#00BED7] rounded-full flex items-center justify-center">
|
|
<p className="text-white text-[10px] font-mono font-semibold -ml-[0.5px]">{favoriteUnits.length}</p>
|
|
</div>
|
|
)}
|
|
</NavLink>
|
|
<div className="w-px h-3 bg-[#E2E2DC]"></div>
|
|
<NavLink to="#" className="p-4">
|
|
Brochures
|
|
</NavLink>
|
|
<div className="w-px h-3 bg-[#E2E2DC]"></div>
|
|
<NavLink to="/search" className="p-4">
|
|
Search
|
|
</NavLink>
|
|
</div>
|
|
<div className="w-[230px]"></div>
|
|
<div className="xl:hidden px-4 py-2">
|
|
<Button2
|
|
variant="secondary"
|
|
size="small"
|
|
icon={
|
|
showNavbar ? (
|
|
<CloseIcon className="w-5 h-5" />
|
|
) : (
|
|
<BurgerIcon className="w-5 h-5" />
|
|
)
|
|
}
|
|
onlyIcon
|
|
className="ring-1 ring-[#E2E2DC]"
|
|
onClick={handleClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Header;
|