upd
This commit is contained in:
@@ -1 +1 @@
|
||||
VITE_API_URL=http://192.168.1.170:3000
|
||||
VITE_API_URL=http://194.26.138.94:4002
|
||||
@@ -56,11 +56,11 @@ function FloorSelect({ complexName }: { complexName: string }) {
|
||||
>
|
||||
{Object.entries(
|
||||
floorsMasks[complexName as keyof typeof floorsMasks]
|
||||
).map(([floor, d]) => (
|
||||
).map(([floorTitle, d]) => (
|
||||
<path
|
||||
onMouseEnter={() => setHoveredFloor(floor)}
|
||||
onMouseEnter={() => setHoveredFloor(floorTitle)}
|
||||
onMouseLeave={() => setHoveredFloor(null)}
|
||||
key={floor}
|
||||
key={floorTitle}
|
||||
d={d}
|
||||
className="fill-[#00BED7] cursor-pointer transition-opacity duration-300 opacity-20 hover:opacity-60 peer"
|
||||
/>
|
||||
|
||||
@@ -4,23 +4,23 @@ import InstagramIcon from "./icons/InstagramIcon";
|
||||
import FacebookIcon from "./icons/FacebookIcon";
|
||||
import LinkedInIcon from "./icons/LinkedInIcon";
|
||||
import TwitterIcon from "./icons/TwitterIcon";
|
||||
import ChevronDownIcon from "./icons/ChevronDownIcon";
|
||||
// import ChevronDownIcon from "./icons/ChevronDownIcon";
|
||||
import { useFavoritesUnitsStore } from "../stores/useFavoritesUnitsStore";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useState } from "react";
|
||||
import { BrochureButton } from "./Header";
|
||||
import clsx from "clsx";
|
||||
import { useClickAway } from "@uidotdev/usehooks";
|
||||
import Button from "./ui/Button";
|
||||
// import { AnimatePresence, motion } from "motion/react";
|
||||
// import { useState } from "react";
|
||||
// import { BrochureButton } from "./Header";
|
||||
// import clsx from "clsx";
|
||||
// import { useClickAway } from "@uidotdev/usehooks";
|
||||
// import Button from "./ui/Button";
|
||||
import useModalStore from "../stores/useModalStore";
|
||||
import PrivacyPolicyModal from "./modals/PrivacyPolicyModal";
|
||||
|
||||
function Footer() {
|
||||
const { favoriteUnits } = useFavoritesUnitsStore();
|
||||
|
||||
const [opened, setOpened] = useState(false);
|
||||
// const [opened, setOpened] = useState(false);
|
||||
|
||||
const ref = useClickAway<HTMLDivElement>(() => setOpened(false));
|
||||
// const ref = useClickAway<HTMLDivElement>(() => setOpened(false));
|
||||
|
||||
const { setModal } = useModalStore();
|
||||
|
||||
|
||||
+39
-25
@@ -1,13 +1,14 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import ArrowLeftIcon from './icons/ArrowLeftIcon';
|
||||
import ArrowRightIcon from './icons/ArrowRightIcon';
|
||||
import { dubaiMarinaSlider } from '../data/aboutDubaiMarina';
|
||||
import { AnimatePresence, motion } from 'motion/react';
|
||||
import { useEffect, useState } from "react";
|
||||
import ArrowLeftIcon from "./icons/ArrowLeftIcon";
|
||||
import ArrowRightIcon from "./icons/ArrowRightIcon";
|
||||
import { dubaiMarinaSlider } from "../data/aboutDubaiMarina";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
|
||||
function Slider({
|
||||
categoryName,
|
||||
}: {
|
||||
categoryName: 'Wellness' | 'Fitness' | 'Community' | 'Convenience';
|
||||
categoryName: "Wellness" | "Fitness" | "Community" | "Convenience";
|
||||
}) {
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [direction, setDirection] = useState(-1);
|
||||
@@ -26,34 +27,47 @@ function Slider({
|
||||
}
|
||||
};
|
||||
|
||||
const handlers = useSwipeable({
|
||||
onSwipedLeft: handleNextSlide,
|
||||
onSwipedRight: handlePreviousSlide,
|
||||
preventScrollOnSwipe: true,
|
||||
touchEventOptions: {
|
||||
passive: false,
|
||||
},
|
||||
trackMouse: true,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentSlide(0);
|
||||
}, [categoryName]);
|
||||
|
||||
return (
|
||||
<div className='relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw]'>
|
||||
<AnimatePresence custom={direction}>
|
||||
<div
|
||||
{...handlers}
|
||||
className="relative w-[63.333vw] h-[27.639vw] rounded-3xl overflow-hidden max-md:w-[91.111vw] max-md:h-[110.556vw]"
|
||||
>
|
||||
<AnimatePresence custom={direction} initial={false}>
|
||||
<motion.div
|
||||
key={currentSlide}
|
||||
className='absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-10'
|
||||
className="absolute inset-0 bg-cover bg-no-repeat bg-center before:absolute before:inset-0 before:bg-[#0D1922]/20 before:z-10"
|
||||
style={{
|
||||
backgroundImage: `url(${dubaiMarinaSlider[categoryName][currentSlide].image})`,
|
||||
}}
|
||||
custom={direction}
|
||||
initial={{ x: direction > 0 ? '100%' : '-100%' }}
|
||||
animate={{ x: 0, transition: { duration: 0.5, ease: 'easeInOut' } }}
|
||||
initial={{ x: direction > 0 ? "100%" : "-100%" }}
|
||||
animate={{ x: 0, transition: { duration: 0.5, ease: "easeInOut" } }}
|
||||
exit={{
|
||||
x: direction > 0 ? '100%' : '-100%',
|
||||
transition: { duration: 0.8, ease: 'easeInOut' },
|
||||
x: direction > 0 ? "100%" : "-100%",
|
||||
transition: { duration: 0.8, ease: "easeInOut" },
|
||||
}}
|
||||
/>
|
||||
</AnimatePresence>
|
||||
<div className='relative z-10 w-full h-full flex flex-col justify-between p-6'>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<AnimatePresence mode='wait'>
|
||||
<div className="relative z-10 w-full h-full flex flex-col justify-between p-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.h3
|
||||
key={`title-${currentSlide}`}
|
||||
className='text-subheadline-m text-white max-md:text-h5'
|
||||
className="text-h3 text-white max-md:text-h5"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -62,10 +76,10 @@ function Slider({
|
||||
{dubaiMarinaSlider[categoryName][currentSlide].title}
|
||||
</motion.h3>
|
||||
</AnimatePresence>
|
||||
<AnimatePresence mode='wait'>
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.p
|
||||
key={`desc-${currentSlide}`}
|
||||
className='text-s w-[19.861vw] tracking-[-0.02em] leading-[140%] text-white max-md:w-full max-md:text-caption-m'
|
||||
className="text-s w-[19.861vw] tracking-[-0.02em] leading-[140%] text-white max-md:w-full max-md:text-caption-m"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
@@ -75,23 +89,23 @@ function Slider({
|
||||
</motion.p>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
<div className='flex items-center gap-[0.556vw] relative max-md:gap-[2.222vw]'>
|
||||
<div className="flex items-center gap-[0.556vw] relative max-md:gap-[2.222vw]">
|
||||
<div
|
||||
className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
|
||||
className="w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200"
|
||||
onClick={handlePreviousSlide}
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<span className="w-5 h-5">
|
||||
<ArrowLeftIcon />
|
||||
</span>
|
||||
</div>
|
||||
<div className='text-s text-white'>
|
||||
<div className="text-s text-white">
|
||||
{currentSlide + 1}/{dubaiMarinaSlider[categoryName].length}
|
||||
</div>
|
||||
<div
|
||||
className='w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200'
|
||||
className="w-10 h-10 rounded-xl text-[#0D1922] bg-white flex items-center justify-center cursor-pointer hover:bg-[#F3F3F2] transition-all duration-200"
|
||||
onClick={handleNextSlide}
|
||||
>
|
||||
<span className='w-5 h-5'>
|
||||
<span className="w-5 h-5">
|
||||
<ArrowRightIcon />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
import SearchFilters from "../SearchFilters";
|
||||
|
||||
function UnitFiltersModal() {
|
||||
return <SearchFilters inModal />;
|
||||
}
|
||||
|
||||
export default UnitFiltersModal;
|
||||
@@ -227,7 +227,7 @@ function SearchPage() {
|
||||
{showButtons && (
|
||||
<div
|
||||
className={clsx(
|
||||
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all",
|
||||
"fixed left-1/2 -translate-x-1/2 flex justify-center 2xl:gap-[0.278vw] gap-2 transition-all z-2",
|
||||
footerReached && !hasNextPage
|
||||
? "top-[calc(100dvh-17.222vw)] translate-y-0"
|
||||
: "top-[calc(100dvh-2.222vw)] -translate-y-full"
|
||||
|
||||
Reference in New Issue
Block a user