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

similar slider

Browse Source
This commit is contained in:
zojgame
2024-05-22 18:52:02 +05:00
parent efa598f3b8
commit a9cde50016
4 changed files with 175 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/complexWingPage/SequenceWing.tsx
+2 -2
View File
@@ -148,7 +148,7 @@ const SequenceWing = () => {
}, [isSidebar]);
return (
<div className="absolute left-0 overflow-hidden h-screen w-screen ">
<div className="absolute left-0 overflow-hidden h-screen w-screen select-none pointer-events-none">
<div
className=" absolute h-[calc(100vh-56px)] right-0 w-1/2 duration-300 transition-all "
style={{ right: `${isFloorSidebar ? "0" : "-50%"}` }}
@@ -216,7 +216,7 @@ const SequenceWing = () => {
width={`${width}px`}
height={`${width}px`}
src="/images/sequenceWing.jpg"
className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100`}
className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100 select-none`}
alt=""
/>
<svg
src/components/searchApartment/SimilarAppartmentCard.tsx
+63
View File
@@ -0,0 +1,63 @@
import { useNavigate } from "react-router-dom";
import { ILayoutCard } from "../../types/layoutCard";
interface LayoutCardProps {
layoutCard: ILayoutCard;
elementRef: React.MutableRefObject<HTMLDivElement | null>;
}
const SimilarAppartmentCard = ({ layoutCard, elementRef }: LayoutCardProps) => {
const {
floorEnd,
floorStart,
apartmentType,
roveHome,
wing,
units,
square,
cost,
id,
} = layoutCard;
const navigate = useNavigate();
const handleOnClick = () => {
navigate(`${id}`);
};
return (
<div
ref={elementRef}
className="bg-white flex flex-col p-4 rounded-lg gap-4 cursor-pointer select-none"
onClick={handleOnClick}
>
<div className="flex gap-4 justify-between">
<div className="flex gap-1 flex-col">
<p className="text-[#00BED7] text-s leading-5">
Rove Home {roveHome}
</p>
<div className="text-[#73787C] flex gap-2 items-center w-fit">
<p className="text-caption-m font-semibold leading-4">{wing}</p>
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
<p className="text-caption-m font-semibold leading-4">
Floor {floorStart}-{floorEnd}
</p>
</div>
</div>
<div className="bg-[#00BED7] text-white text-caption-m font-semibold rounded-full py-[3px] px-2 self-start text-nowrap">
{units} units
</div>
</div>
<div className="w-full aspect-square rounded-lg">
<img src="/images/layout-1.png" alt="" className="h-full" />
</div>
<div className="flex flex-col">
<p className="text[#0D1922] text-s">
{apartmentType}, {square} Sqft
</p>
<p className="text-[#00BED7] text-m font-bold">AED {cost}</p>
</div>
</div>
);
};
export default SimilarAppartmentCard;
src/components/searchApartment/SimilarSlider.tsx
+105
View File
@@ -0,0 +1,105 @@
import { useEffect, useLayoutEffect, useRef, useState } from "react";
import { layoutsCards } from "../../consts/initialSearchPage";
import LayoutCard from "../searchPage/LayoutCard";
import SimilarAppartmentCard from "./SimilarAppartmentCard";
import Button from "../Button";
import RightArrowIcon from "../icons/RightArrowIcon";
const SimilarSlider = () => {
const [cards, setCards] = useState(layoutsCards.slice(0, 4));
const [offset, setOffset] = useState(0);
const sliderRef = useRef<HTMLDivElement | null>(null);
const cardRef = useRef<HTMLDivElement | null>(null);
const [sliderHeight, setSliderHeight] = useState(0);
const [cardWidth, setCardWidth] = useState(0);
useLayoutEffect(() => {
const sliderElement = sliderRef.current;
if (sliderElement) {
const height = sliderElement.clientHeight;
setSliderHeight(height);
}
const cardElement = cardRef.current;
if (cardElement) {
const gap = 16;
const width = cardElement.clientWidth + gap;
setCardWidth(width);
}
}, []);
useEffect(() => {
console.log("offset", offset);
return () => {};
}, [offset]);
const handleOnLeftBtnClick = () => {
if (0 < offset) {
setOffset((prev) => prev + 1);
}
};
const handleOnRightBtnClick = () => {
// if (0 > offset) {
setOffset((prev) => prev - 1);
// }
};
return (
<>
<div className="flex justify-between pt-10 pb-4">
<h2 className="text-[#0D1922] font-semibold text-subheadline-m">
Similar
</h2>
<div className="flex gap-2">
<Button
onClick={handleOnLeftBtnClick}
icon={<RightArrowIcon />}
buttonType="fab"
className="rotate-180"
/>
<Button
icon={<RightArrowIcon />}
onClick={handleOnRightBtnClick}
buttonType="fab"
/>
</div>
</div>
<div className="border-t border-b py-4">
<div className="w-[100vw-16px] overflow-hidden">
<div
className={` relative transition-transform duration-300 ease-in-out`}
style={{
height: sliderHeight,
transform: `translateX(${offset * cardWidth}px)`,
}}
>
<div className="flex w-fit gap-4 absolute left-0 top-0">
<div
className="grid grid-cols-4 gap-4 w-[calc(100vw-32px)] h-fit"
ref={sliderRef}
>
{cards.map((layoutsCard) => (
<SimilarAppartmentCard
elementRef={cardRef}
layoutCard={layoutsCard}
/>
))}
</div>
<div className="grid grid-cols-4 gap-4 w-[calc(100vw-32px)]">
{cards.map((layoutsCard) => (
<SimilarAppartmentCard
elementRef={cardRef}
layoutCard={layoutsCard}
/>
))}
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default SimilarSlider;
src/pages/SearchApartment.tsx
+5 -1
View File
@@ -2,11 +2,12 @@ import Footer from "../components/Footer";
import ButtonPanel from "../components/searchApartment/ButtonPanel";
import ApartmentLayout from "../components/searchApartment/ApartmentLayout";
import ApartmentSidebar from "../components/searchApartment/ApartmentSidebar";
import SimilarSlider from "../components/searchApartment/SimilarSlider";
const SearchApartment = () => {
return (
<div className="overflow-scroll h-screen w-screen pt-14">
<div className="grid grid-cols-9 border px-4 pt-6 pb-4 gap-4">
<div className="grid grid-cols-9 border px-4 pt-6 pb-16 gap-4">
<div className="flex flex-col col-span-7">
<ButtonPanel />
<ApartmentLayout />
@@ -14,6 +15,9 @@ const SearchApartment = () => {
<div className="col-span-2 rounded-lg">
<ApartmentSidebar />
</div>
<div className="col-span-9">
<SimilarSlider />
</div>
</div>
<Footer />
</div>