From 853fb156cd0d03dd11fa62f6be5f2e56fbde3d3b Mon Sep 17 00:00:00 2001 From: Lanskikh Date: Tue, 22 Apr 2025 12:21:44 +0500 Subject: [PATCH] adaptive footer --- src/components/Footer.tsx | 170 ++++++++++--------- src/components/Header.tsx | 30 +++- src/components/Map.tsx | 10 +- src/components/SequenceSlider.tsx | 4 +- src/components/icons/BurgerIcon.tsx | 14 ++ src/components/icons/{ => map}/TouchIcon.tsx | 0 src/layout/DefaultLayout.tsx | 2 +- src/layout/LayoutWithoutFooter.tsx | 15 ++ src/main.tsx | 35 ++-- 9 files changed, 173 insertions(+), 107 deletions(-) create mode 100644 src/components/icons/BurgerIcon.tsx rename src/components/icons/{ => map}/TouchIcon.tsx (100%) create mode 100644 src/layout/LayoutWithoutFooter.tsx diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 3c20050..15c69cb 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,5 +1,4 @@ -import clsx from "clsx"; -import { Link, useLocation } from "react-router"; +import { Link } from "react-router"; import YoutubeIcon from "./icons/YoutubeIcon"; import InstagramIcon from "./icons/InstagramIcon"; import FacebookIcon from "./icons/FacebookIcon"; @@ -7,89 +6,102 @@ import LinkedInIcon from "./icons/LinkedInIcon"; import TwitterIcon from "./icons/TwitterIcon"; function Footer() { - const { pathname } = useLocation(); - return ( -
-
- -
-

- For more information, visit our website:  - - www.irth.ae - -

-
-

Follow us for more:

-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
+
+ { + window.location.href = "/"; + }} + alt="IRTH" + /> + +

+ For more information, visit +
+ our website:  + + www.irth.ae + +

+ +
+

Follow us for more:

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
-
-
- - Map - - - Unit Types - - - About IRTH - -
-
- - Favorites - - - Search - - - Brochures - -
-
- - Privacy Policy - -
+ +
+ + Map + + + Unit Types + + + About IRTH +
-
+ +
+ + Favorites + + + Search + + + Brochures + +
+ +
+ + Privacy Policy + +
+
); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 977c416..8915871 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -3,6 +3,8 @@ import LocationIcon from "./icons/LocationIcon"; import clsx from "clsx"; import ArrowDownIcon from "./icons/ArrowDownIcon"; import { useState } from "react"; +import Button from "./ui/Button"; +import BurgerIcon from "./icons/BurgerIcon"; function Header() { function handleLogoClick() { @@ -10,7 +12,7 @@ function Header() { } return ( -
+
-
+
+ +
); } @@ -39,7 +43,7 @@ export default Header; function NavBar() { return ( - <> +
- + +
); } @@ -68,6 +82,14 @@ function NavItem({ href, title }: { href: string; title: string }) { ); } +function ProfileBar() { + return ( + + ); +} + function BrochuresDropdown() { const [opened, setOpened] = useState(false); diff --git a/src/components/Map.tsx b/src/components/Map.tsx index bd2132a..53b7ff8 100644 --- a/src/components/Map.tsx +++ b/src/components/Map.tsx @@ -17,7 +17,7 @@ import { isMobile } from "react-device-detect"; import SelectedComplexCard from "./SelectedComplexCard"; import FullScreenButton from "./FullScreenButton"; import useWindowSize from "../hooks/useWindowSize"; -import TouchIcon from "./icons/TouchIcon"; +import TouchIcon from "./icons/map/TouchIcon"; interface Position { x: number; @@ -540,10 +540,10 @@ function Map({ maxZoom = 1 }: MapProps) { let lastTimestamp = performance.now(); function animateClouds(now: number) { - const delta = (now - lastTimestamp) / 100; + const delta = (now - lastTimestamp) / 200; lastTimestamp = now; setCloudOffset((prev) => { - let next = prev + (windSpeed * delta) / 10; + let next = prev + windSpeed * delta; if (cloudImageWidth > 0 && next > 0) next -= cloudImageWidth; return next; }); @@ -561,7 +561,7 @@ function Map({ maxZoom = 1 }: MapProps) { return (
handleSwipe("prev")} > - + @@ -216,7 +216,7 @@ function SequenceSlider({ complexName }: SequenceSliderProps) { disabled={isAnimating || !isShowVideo} onClick={() => handleSwipe("next")} > - + diff --git a/src/components/icons/BurgerIcon.tsx b/src/components/icons/BurgerIcon.tsx new file mode 100644 index 0000000..b16184a --- /dev/null +++ b/src/components/icons/BurgerIcon.tsx @@ -0,0 +1,14 @@ +function BurgerIcon() { + return ( + + + + ); +} + +export default BurgerIcon; diff --git a/src/components/icons/TouchIcon.tsx b/src/components/icons/map/TouchIcon.tsx similarity index 100% rename from src/components/icons/TouchIcon.tsx rename to src/components/icons/map/TouchIcon.tsx diff --git a/src/layout/DefaultLayout.tsx b/src/layout/DefaultLayout.tsx index 96e9833..ddd5088 100644 --- a/src/layout/DefaultLayout.tsx +++ b/src/layout/DefaultLayout.tsx @@ -4,7 +4,7 @@ import Footer from "../components/Footer"; function DefaultLayout() { return ( -
+
diff --git a/src/layout/LayoutWithoutFooter.tsx b/src/layout/LayoutWithoutFooter.tsx new file mode 100644 index 0000000..5683f18 --- /dev/null +++ b/src/layout/LayoutWithoutFooter.tsx @@ -0,0 +1,15 @@ +import Header from "../components/Header"; +import { Outlet } from "react-router"; + +function LayoutWithoutFooter() { + return ( +
+
+
+ +
+
+ ); +} + +export default LayoutWithoutFooter; diff --git a/src/main.tsx b/src/main.tsx index 413d381..ab20cde 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,6 +1,5 @@ -// import { QueryClientProvider } from "@tanstack/react-query"; -import { createRoot } from "react-dom/client"; import "./index.css"; +import { createRoot } from "react-dom/client"; import { createBrowserRouter, RouterProvider } from "react-router"; import DefaultLayout from "./layout/DefaultLayout.tsx"; import MainPage from "./pages/MainPage.tsx"; @@ -11,23 +10,12 @@ import UnitTypesPage from "./pages/UnitTypesPages.tsx"; import AboutPage from "./pages/AboutPages.tsx"; import FavouritesPage from "./pages/FavouritesPage.tsx"; import SearchPage from "./pages/SearchPage.tsx"; +import LayoutWithoutFooter from "./layout/LayoutWithoutFooter.tsx"; const route = createBrowserRouter([ { element: , children: [ - { - path: "/", - element: , - }, - { - path: "/complex/:complexName", - element: , - }, - { - path: "/complex/:complexName/floors", - element: , - }, { path: "/unit-types", element: , @@ -46,13 +34,28 @@ const route = createBrowserRouter([ }, ], }, + { + element: , + children: [ + { + path: "/", + element: , + }, + { + path: "/complex/:complexName", + element: , + }, + { + path: "/complex/:complexName/floors", + element: , + }, + ], + }, ]); createRoot(document.getElementById("root")!).render( <> - {/* */} - {/* */} );