zojgame/IRTH
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

mobile header

Browse Source
This commit is contained in:
zojgame
2024-04-17 13:30:23 +05:00
parent 3fff036486
commit ecba8be306
12 changed files with 186 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -11,6 +11,7 @@
},
"dependencies": {
"react": "^18.2.0",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-image-marker": "^1.2.0",
"react-router-dom": "^6.22.3",
src/components/header/Auth.tsx
+47 -13
View File
@@ -1,25 +1,59 @@
import { isMobile } from "react-device-detect";
import Button from "../Button";
interface AuthProps {
isAuth: boolean;
userName: string;
}
const Auth = () => {
const isAuth = false;
const username = "Name";
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>
{isMobile ? (
<AuthMobile isAuth={isAuth} userName={userName} />
) : (
<AuthDesktop isAuth={isAuth} userName={userName} />
)}
</>
);
};
const AuthMobile = ({ isAuth, userName }: AuthProps) => {
return (
<div className="flex gap-4 p-4 text-black justify-center w-full items-center">
{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" className="w-full" />
)}
</div>
);
};
const AuthDesktop = ({ isAuth, userName }: AuthProps) => {
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
-26
View File
@@ -1,26 +0,0 @@
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/Header/DesktopHeader.tsx
+17
View File
@@ -0,0 +1,17 @@
import Auth from "../Auth";
import Logo from "../Logo";
import Navbar from "../Navbar";
import Location from "../Location";
const DesktopHeader = () => (
<header className="bg-white w-full text-white sm:grid grid-cols-6 text-sm">
<div className="flex gap-4 col-span-2">
<Logo />
<Location />
</div>
<Navbar />
<Auth />
</header>
);
export default DesktopHeader;
src/components/header/Header/Header.tsx
+18
View File
@@ -0,0 +1,18 @@
import { Outlet } from "react-router-dom";
import { isMobile } from "react-device-detect";
import useModal from "../../../store/useModal";
import DesktopHeader from "./DesktopHeader";
import MobileHeader from "./MobileHeader";
const Header = () => {
const { modal } = useModal();
return (
<>
{modal}
{isMobile ? <MobileHeader /> : <DesktopHeader />}
<Outlet />
</>
);
};
export default Header;
src/components/header/Header/MobileHeader.tsx
+43
View File
@@ -0,0 +1,43 @@
import { useState } from "react";
import LogoIcon from "../../icons/LogoIcon";
import Auth from "../Auth";
import Navbar from "../Navbar";
import Location from "../Location";
const MobileHeader = () => {
const [isToggled, setIsToggled] = useState(false);
const handleOnToggleClick = () => {
setIsToggled((prev) => !prev);
};
return (
<header
className={`bg-white w-full text-white flex flex-col text-sm items-center transition-[height] duration-500 ease-in-out absolute top-0 left-0 z-30 overflow-hidden ${
isToggled ? "h-[472px]" : "h-14"
}`}
>
<div className="flex justify-between w-full p-4">
<div
className={`text-[#0D1922] transition-opacity duration-500 ${
isToggled ? "opacity-0" : "opacity-100"
}`}
>
<LogoIcon />
</div>
<div className="bg-black w-6 h-6" onClick={handleOnToggleClick}></div>
</div>
<div className="flex flex-col justify-between h-full items-center w-full ">
<div className="flex flex-col gap-4">
<div className="text-[#0D1922] items-center">
<LogoIcon />
</div>
<Location />
</div>
<Navbar />
<Auth />
</div>
</header>
);
};
export default MobileHeader;
src/components/header/Location.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import LocationIcon from "../icons/LocationIcon";
const Location = () => {
return (
<div className="text-[#73787C] flex gap-1 items-center">
<div className="text-[#73787C] flex gap-1 items-center justify-center">
<LocationIcon />
<p className="">Dubai</p>
</div>
src/components/header/Navbar.tsx
+41 -13
View File
@@ -1,4 +1,5 @@
import { useState } from "react";
import { isMobile } from "react-device-detect";
import { Tab } from "../../types/tab";
import NavbarTab from "./NavbarTab";
@@ -32,20 +33,47 @@ const Navbar = () => {
};
return (
<nav className="flex text-[#73787C] self-center col-span-2 justify-center">
{tabs.map((tab) => (
<NavbarTab
key={tab.id}
tab={tab}
isSelected={selectedTab?.id === tab.id}
onClick={onTabClick}
/>
// <button key={tab} className="px-4 py-[10px]">
// {tab}
// </button>
))}
</nav>
<>
{isMobile ? (
<NavbarMobile selectedTab={selectedTab} onTabClick={onTabClick} />
) : (
<NavbarDesktop selectedTab={selectedTab} onTabClick={onTabClick} />
)}
</>
);
};
interface NavbarProps {
selectedTab: Tab | null;
onTabClick: (tab: Tab) => void;
}
const NavbarDesktop = ({ selectedTab, onTabClick }: NavbarProps) => (
<nav className={`text-[#73787C] self-center col-span-2 justify-center flex`}>
{tabs.map((tab) => (
<NavbarTab
key={tab.id}
tab={tab}
isSelected={selectedTab?.id === tab.id}
onClick={onTabClick}
/>
))}
</nav>
);
const NavbarMobile = ({ selectedTab, onTabClick }: NavbarProps) => (
<nav
className={`text-[#73787C] self-center justify-center flex w-full flex-col items-center`}
>
{tabs.map((tab) => (
<NavbarTab
key={tab.id}
tab={tab}
isSelected={selectedTab?.id === tab.id}
onClick={onTabClick}
/>
))}
</nav>
);
export default Navbar;
src/components/header/NavbarTab.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ interface NavbarTabProps {
const NavbarTab = ({ tab, onClick, isSelected = false }: NavbarTabProps) => {
return (
<button
className="px-4 text-[#73787C] hover:text-black relative"
className="px-4 text-[#73787C] hover:text-black relative w-fit"
onClick={() => onClick(tab)}
>
<div
src/components/map/Map.tsx
+4 -1
View File
@@ -1,6 +1,7 @@
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
import ImageMarker from "react-image-marker";
import { MarkerComponentProps } from "react-image-marker";
import { isMobile } from "react-device-detect";
import Marker from "./Marker";
import { markers } from "../../consts/markers";
import useMarker from "../../store/useMarker";
@@ -31,7 +32,9 @@ const Map = () => {
// animationType: "easeOut",
// }}
>
<TransformComponent wrapperClass="h-[calc(100vh-60px)]">
<TransformComponent
wrapperClass={`${isMobile ? "h-screen" : "h-[calc(100vh-60px)]"}`}
>
<ImageMarker
src="images/Map.jpg"
markers={imageMarkers}
src/main.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Header from "./components/header/Header";
import Header from "./components/header/Header/Header";
import Main from "./pages/Main";
import "./index.css";
yarn.lock
+12
View File
@@ -1774,6 +1774,13 @@ queue-microtask@^1.2.2:
resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
react-device-detect@^2.2.3:
version "2.2.3"
resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
dependencies:
ua-parser-js "^1.0.33"
react-dom@^18.2.0:
version "18.2.0"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
@@ -2093,6 +2100,11 @@ typescript@^5.2.2:
resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz"
integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
ua-parser-js@^1.0.33:
version "1.0.37"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f"
integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==
update-browserslist-db@^1.0.13:
version "1.0.13"
resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz"