first
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import {
|
||||
backgroundColors,
|
||||
backgroundHoverColors,
|
||||
textColors,
|
||||
} from "../consts/buttonColors";
|
||||
import { ButtonType } from "../types/button";
|
||||
|
||||
interface ButtonProps {
|
||||
buttonType?: ButtonType;
|
||||
icon?: React.ReactNode;
|
||||
text?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
className,
|
||||
icon,
|
||||
text,
|
||||
buttonType = "primary",
|
||||
}: ButtonProps) => {
|
||||
const backgroundColor = backgroundColors[buttonType];
|
||||
const backgroundHoverColor = backgroundHoverColors[buttonType];
|
||||
const textColor = textColors[buttonType];
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`min-w-[50px] py-3 px-6 transition-[background] duration-300 ease-in-out rounded-lg ${backgroundColor} ${backgroundHoverColor} ${textColor} ${
|
||||
className ? className : ""
|
||||
}`}
|
||||
>
|
||||
{icon && <div>{icon}</div>}
|
||||
{text && <p>{text}</p>}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,19 @@
|
||||
const LineIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="1"
|
||||
height="18"
|
||||
viewBox="0 0 1 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0.5 1L0.499999 17"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LineIcon;
|
||||
@@ -0,0 +1,20 @@
|
||||
const LocationIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M4.16675 8.125C4.16675 7.38632 4.31763 6.65486 4.61078 5.97241C4.90394 5.28995 5.33362 4.66985 5.87529 4.14752C6.41697 3.6252 7.06003 3.21086 7.76776 2.92818C8.47549 2.6455 9.23404 2.5 10.0001 2.5C10.7661 2.5 11.5247 2.64549 12.2324 2.92818C12.9401 3.21086 13.5832 3.62519 14.1249 4.14752C14.6665 4.66985 15.0962 5.28995 15.3894 5.97241C15.6825 6.65486 15.8334 7.38631 15.8334 8.125C15.8334 12.2469 12.7012 15.3619 11.0271 16.7324C10.4211 17.2286 9.57906 17.2286 8.97304 16.7324C7.299 15.3619 4.16675 12.2469 4.16675 8.125ZM10.0001 11.6667C11.841 11.6667 13.3334 10.1743 13.3334 8.33333C13.3334 6.49238 11.841 5 10.0001 5C8.15913 5 6.66675 6.49238 6.66675 8.33333C6.66675 10.1743 8.15913 11.6667 10.0001 11.6667Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LocationIcon;
|
||||
@@ -0,0 +1,37 @@
|
||||
const LogoIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="86"
|
||||
height="24"
|
||||
viewBox="0 0 86 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_227_586)">
|
||||
<path
|
||||
d="M10.3982 0H0L2.49306 1.87928V22.1237L0 24H10.3982L7.90218 22.1237V1.87928L10.3982 0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M83.5038 1.87928L85.9999 0H75.6016L78.0947 1.87928V11.2486H68.4735V1.87928L70.9665 0H60.5713L63.0644 1.87928V22.1237L60.5713 24H70.9665L68.4735 22.1237V12.2033H78.0947V22.1237L75.6016 24H85.9999L83.5038 22.1237V1.87928Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M57.6044 0H37.543L37.546 6.28536L40.633 0.954699H44.8931V22.1237L42.4001 24H52.7983L50.3023 22.1237V0.954699H54.5414L57.6254 6.28536V0.00602334L57.6044 0.0120467V0Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<path
|
||||
d="M21.2855 0.903438H23.7486C23.7486 0.903438 28.1557 0.740808 28.3207 5.36673C28.4857 9.99266 26.9707 12.3387 22.4915 12.1219V13.0224H24.2856L29.6077 23.9999H37.8849L34.8308 21.6508L29.8837 13.4169C29.8837 13.4169 26.9197 13.0736 26.3376 12.7513C26.3166 12.7513 34.1978 12.4683 34.2008 5.76126C34.2008 5.74319 34.6568 -0.0090981 24.8406 0.00294858L13.3713 0.0180069L15.8644 1.89428V22.1207L13.3713 23.9999H23.7696L21.2765 22.1207L21.2915 0.900426L21.2855 0.903438Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_227_586">
|
||||
<rect width="86" height="24" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogoIcon;
|
||||
@@ -0,0 +1,19 @@
|
||||
const OpenFullscreenIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="49"
|
||||
height="48"
|
||||
viewBox="0 0 49 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.9 29L6.5 24M6.5 24L11.9 19M6.5 24H18.2M30.8 24H42.5M42.5 24L37.1 29M42.5 24L37.1 19M29.5 36.6L24.5 42M24.5 42L19.5 36.6M24.5 42V30.3M24.5 17.7V6M24.5 6L29.5 11.4M24.5 6L19.5 11.4"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default OpenFullscreenIcon;
|
||||
@@ -0,0 +1,21 @@
|
||||
const SearchPlusIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="49"
|
||||
height="48"
|
||||
viewBox="0 0 49 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M41.5 41L33.8137 33.3137M33.8137 33.3137C36.7091 30.4183 38.5 26.4183 38.5 22C38.5 13.1634 31.3366 6 22.5 6C13.6634 6 6.5 13.1634 6.5 22C6.5 30.8366 13.6634 38 22.5 38C26.9141 38 30.9108 36.2125 33.8056 33.3219L33.8137 33.3137ZM16.5 22H28.5M22.5 16V28"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchPlusIcon;
|
||||
@@ -0,0 +1,15 @@
|
||||
import SearchPlusIcon from "../icons/SearchIcon";
|
||||
import OpenFullscreenIcon from "../icons/OpenFullscreenIcon";
|
||||
import LineIcon from "../icons/LineIcon";
|
||||
|
||||
const ZoomHint = () => {
|
||||
return (
|
||||
<div className="absolute z-10 m-auto top-1/2 left-1/2 flex bg-[#0D192266] p-4 text-white gap-4 items-center">
|
||||
<SearchPlusIcon />
|
||||
<LineIcon />
|
||||
<OpenFullscreenIcon />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ZoomHint;
|
||||
Reference in New Issue
Block a user