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

masterplan page

Browse Source
This commit is contained in:
zojgame
2024-07-05 14:07:19 +05:00
parent 30594484fb
commit 51c2fb6d8e
24 changed files with 310 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/ApartmentSidebar.tsx
+67 -30
View File
@@ -9,7 +9,7 @@ interface ApartmentSidebarProps {
const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
const navigate = useNavigate();
const unitNo = currentApartment.Unit_No.split("-")[1];
// const unitNo = currentApartment.Unit_No.split("-")[1];
const wing =
currentApartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";
@@ -18,11 +18,16 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
};
return (
<div className="flex gap-2 w-full">
<div className="flex gap-2 w-full ">
<div className="rounded-2xl overflow-clip flex-none relative w-1/2">
<p className="absolute top-[30px] left-6 font-semibold text-m text-white">
View from window
</p>
<div className="absolute top-[67.5px] left-6 flex flex-col">
<p className=" font-semibold text-[33.75px] text-white">
View from window
</p>
<p className=" font-semibold text-[56.25px] text-white">
Burj Khalifa
</p>
</div>
<img
src="/images/view_from_window.png"
alt=""
@@ -30,37 +35,69 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
/>
</div>
<div className="flex gap-2 flex-col flex-1 w-1/2 aspect-square">
<div className="flex flex-col rounded-2xl bg-white p-6 gap-6 h-full">
<h2 className="font-semibold text-[#0D1922] text-subheadline-s">
Parameters
<div className="flex flex-col rounded-2xl bg-white p-6 h-full">
<h2 className="text-[56.25px] text-[#0D1922] font-semibold leading-[78.75px]">
{currentApartment.Unit_Type}, {currentApartment.Total_Area_Sqft}{" "}
Sqft
</h2>
<div className="flex flex-col gap-3">
<div className="flex justify-between text-m">
<p className="text-[#73787C]">Complex</p>
<p className="text-[#0D1922]">{currentApartment.Project_Name}</p>
</div>
<div className="flex justify-between text-m">
<p className="text-[#73787C]">Section</p>
<p className="text-[#0D1922]">{wing}</p>
</div>
<div className="flex justify-between text-m">
<p className="text-[#73787C]">Floor</p>
<p className="text-[#0D1922]">{currentApartment.Floor}</p>
</div>
<div className="flex justify-between text-m">
<p className="text-[#73787C]">Number</p>
<p className="text-[#0D1922]">{unitNo}</p>
</div>
<div className="flex justify-between text-m">
<p className="text-[#73787C]">Size</p>
<p className="text-[#0D1922]">
<p className="text-[39.2px] text-[#00BED7] font-normal leading-[55.12px] pt-[22.5px]">
{currentApartment.Project_Name}
</p>
<div className="flex gap-2 items-center pt-1 pb-4 border-b">
<p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
{wing}
</p>
<div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
<p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
Floor {currentApartment.Floor}
</p>
<div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
<p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
{currentApartment.Unit_No}
</p>
</div>
<div className="pt-6 flex flex-col gap-3">
<div className="flex justify-between">
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
Total Area
</p>
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
{currentApartment.Total_Area_Sqft} Sqft
</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
Suite Area
</p>
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
{currentApartment.Suite_Area_Sqft} Sqft
</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
Balcony Area
</p>
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
{currentApartment.Balcony_Area_Sqft} Sqft
</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
Status
</p>
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
{currentApartment.Property_Status}
</p>
</div>
<div className="flex justify-between">
<p className="text-[#0D192266] text-[45px] leading-[56.25px]">
Parking Space
</p>
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">1</p>
</div>
</div>
<p className="text-[#00BED7] font-semibold text-subheadline-s leading-7">
<p className="pt-6 font-semibold text-subheadline-s text-[#00BED7] mt-auto">
Unvailiable
{/* AED {formatNumber(1668888, ",", 3, 1)} */}
</p>
</div>
<div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between">
client/src/components/ButtomPanel.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const ButtomPanel = () => {
<Button
text="Disclaimer"
buttonType="special"
className="pl-2"
className="pl-[8px]"
icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick}
isCircleRounded
client/src/components/ButtomPanelCompass.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ const ButtomPanelCompass = () => {
text="Disclaimer"
buttonType="special"
isCircleRounded
className="pl-2"
className="pl-[8px]"
icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick}
/>
client/src/components/Button.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const Button = ({
onClick={onClick}
className={`zoom-280 min-w-[40px] max-h-[40px] ${rounded} ${
icon && !text ? "p-[10px] " : padding
} transition-all duration-300 ease-in-out text-[16px] pointer-events-auto flex gap-1 items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
} transition-all duration-300 ease-in-out text-[16px] pointer-events-auto flex gap-[4px] items-center align-middle h-fit ${backgroundColor} ${textColor} ${border} ${disabledStyle} ${
className ? className : ""
}`}
>
client/src/components/Checkbox.tsx
+8 -8
View File
@@ -11,36 +11,36 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
return (
<div
onClick={() => onClick(checkbox.id)}
className={` zoom-280 flex justify-between bg-white p-3 rounded-lg transition-[background] duration-300 ease-in-out select-none ${
className={` zoom-280 flex justify-between bg-white p-[12px] rounded-[8px] transition-[background] duration-300 ease-in-out select-none ${
checkbox.disabled
? "pointer-events-none touch-none"
: "hover:bg-[#F3F3F2] cursor-pointer"
}`}
>
<div className="flex gap-3">
<div className="flex gap-[12px]">
{checkbox.disabled ? (
<div className="bg-[#E2E2DC] rounded-[4px] w-6 h-6 text-white flex justify-center items-center">
<div className="bg-[#E2E2DC] rounded-[4px] w-[24px] h-[24px] text-white flex justify-center items-center">
<MinusIcon />
</div>
) : (
<div
className={` rounded-[4px] w-6 h-6 flex justify-center items-center ease-in-out duration-300 transition-[background] ${
className={` rounded-[4px] w-[24px] h-[24px] flex justify-center items-center ease-in-out duration-300 transition-[background] ${
checkbox.selected ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
}`}
>
{checkbox.selected ? <SelectedCheckboxIcon /> : <></>}
</div>
)}
<p className="text-s text-[#73787C]">{checkbox.title}</p>
<p className="text-[16px] text-[#73787C]">{checkbox.title}</p>
</div>
{!checkbox.disabled ? (
<div className="bg-[#00BED7] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s ">
<div className="h-fit align-middle text-center flex items-center justify-center leading-1">
<div className="bg-[#00BED7] rounded-full text-white w-[24px] h-[24px] flex items-center justify-center font-semibold text-[12px] ">
<div className="h-fit align-middle text-center flex items-center justify-center leading-[4px]">
8
</div>
</div>
) : (
<div className="bg-[#E2E2DC] rounded-full text-white w-6 h-6 flex items-center justify-center font-semibold text-caption-s">
<div className="bg-[#E2E2DC] rounded-full text-white w-[24px] h-[24px] flex items-center justify-center font-semibold text-[12px]">
<div className="h-fit align-middle text-center flex">
<MinusIcon />
</div>
client/src/components/MultiRangeSlider.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ const MultiRangeSlider = ({
return (
<div className="zoom-280">
<div className="flex justify-between p-3 bg-white rounded-lg relative flex-col">
<div className="flex justify-between p-[12px] bg-white rounded-[8px] relative flex-col">
<div className="flex justify-between">
<NumericFormat
thousandSeparator=","
@@ -94,7 +94,7 @@ const MultiRangeSlider = ({
value={[multirangeSlider.startValue, multirangeSlider.endValue]}
className={`${
isDisabled ? "pointer-events-none text disabled" : ""
} absolute -bottom-3 left-0 w-[calc(100%-16px)] z-20`}
} absolute -bottom-[12px] left-0 w-[calc(100%-16px)] z-20`}
onInput={handleOnRangeInputChange}
/>
</div>
client/src/components/Switch.tsx
+2 -2
View File
@@ -12,13 +12,13 @@ const Switch = ({ switcher, onClick }: ISwitchProps) => {
return (
<div
className={`w-10 h-6 zoom-280 relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
className={`w-[40px] h-[24px] zoom-280 relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
}`}
onClick={handleOnClick}
>
<div
className={`w-5 h-5 bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out top-[2px]
className={`w-[20px] h-[20px] bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out top-[2px]
${switcher.isSwitched ? "left-[18px]" : "left-[2px]"}`}
></div>
</div>
client/src/components/SwitchToggle.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ function SwitchToggle({
lab.id === currentLabel.id
? "bg-[#00BED7] text-white"
: `${isDisabled ? "text-[#0D192266]" : ""}`
} rounded-lg px-6 py-[10px] cursor-pointer transition-all duration-300 ease-in-out`}
} rounded-lg px-6 py-[24px] cursor-pointer transition-all duration-300 ease-in-out`}
>
{lab.label}
</div>
client/src/components/TransparentSelector.tsx
+63
View File
@@ -0,0 +1,63 @@
import { useState } from "react";
import { IOption } from "../types/selectorOption";
import ChevronDownIcon from "./icons/ChevronDownIcon";
import CheckIcon from "./icons/CheckIcon";
import { useClickAway } from "@uidotdev/usehooks";
interface TransparentSelectorProps {
options: IOption[];
onClick: (optId: string) => void;
}
const TransparentSelector = ({
options,
onClick,
}: TransparentSelectorProps) => {
const [isOpened, setIsOpened] = useState(false);
const selectedOpt = options.find((opt) => opt.isSelected)?.value;
const selectorRef = useClickAway(() => {
setIsOpened(false);
}) as React.LegacyRef<HTMLDivElement> | undefined;
const handleOnClick = () => {
setIsOpened((prev) => !prev);
};
return (
<div className="relative" ref={selectorRef}>
<div
className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
onClick={handleOnClick}
>
{selectedOpt && <p className="text-[38.4px]">{selectedOpt} floor</p>}
<div
className={`zoom-280 ease-in-out duration-300 transition-transform ${
isOpened ? "-rotate-180" : ""
}`}
>
<ChevronDownIcon />
</div>
</div>
{isOpened && options.length !== 0 && (
<div className="flex flex-col bg-white p-[19.2px] absolute gap list-shadow">
{options.map((opt) => (
<div
key={opt.id}
onClick={() => onClick(opt.id)}
className="px-[28.8px] py-[19.2px] text-[33.6px] flex gap-[19.2px]"
>
{opt.isSelected && (
<div className="zoom-280 text-[#00BED7]">
<CheckIcon />
</div>
)}
<p className="flex text-nowrap">{opt.value} floor</p>
</div>
))}
</div>
)}
</div>
);
};
export default TransparentSelector;
client/src/components/apartmentPage/ApartmentLayout.tsx
+2 -2
View File
@@ -29,7 +29,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
<div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full flex-1">
<div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center">
<img
className="w-full h-full object-contain max-h-[628px]"
className="w-full h-full object-contain max-h-[1362px]"
src={imageLayout ? imageLayout : apartmentLayoutImage}
alt=""
/>
@@ -37,7 +37,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
<img
src="/images/compass.png"
alt=""
className="absolute right-10 bottom-10"
className="absolute right-10 bottom-10 zoom-280"
/>
<SwitchToggle
isDisabled
client/src/components/complexPage/SequenceSlider.tsx
+2 -2
View File
@@ -251,7 +251,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
</div>
<Button
disabled={isAnimate}
className={`p-3 rounded-full transition-colors absolute left-6 top-[calc(50%-24px)] z-50 ${
className={`p-3 rounded-full transition-colors absolute left-4 top-[calc(50%-24px)] z-50 ${
isAnimate ? "opacity-50" : "opacity-100"
}`}
isCircleRounded
@@ -261,7 +261,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
/>
<Button
disabled={isAnimate}
className={`p-3 rounded-full transition-colors absolute right-6 top-[calc(50%-24px)] z-50 ${
className={`p-3 rounded-full transition-colors absolute right-4 top-[calc(50%-24px)] z-50 ${
isAnimate ? "opacity-50" : "opacity-100"
}`}
buttonType="fab"
client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx
+2 -2
View File
@@ -1,6 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent, useEffect, useState } from "react";
import { useDebounce } from "@uidotdev/usehooks";
import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import useModal from "../../../store/useModal";
import { descriptions } from "../../../consts/masterplan";
@@ -9,7 +10,6 @@ import { IAparmentRes } from "../../../types/apartmentsRes";
import useMasterplanFilters from "../../../store/useMasterplanFilters";
import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilters";
import { pageInitial } from "../../../consts/initialMasterplanFilters";
import { useDebounce } from "@uidotdev/usehooks";
import { getFilteredApartments } from "../../../calc/getFilteredApartments";
import FloorNumbers from "./FloorNumbers";
import WingSignatures from "./WingSignatures";
@@ -189,7 +189,7 @@ const SequenceWing = () => {
setModal(
<WingFloorModal
currentFloor={currentHoveredFloor}
floorApartments={apartments}
floorApartments={currentHoveredApartments}
/>
);
setIsDescriptionFloorMobile(false);
client/src/components/complexWingPage/SkygardenSidebar/LayoutSlider.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const LayoutSlider = () => {
currentLabel={currentLabel}
onClick={handleOnSwitchClick}
/>
<div className="flex w-full overflow-x-hidden max-w-[1100px] mx-auto overflow-hidden select-none pt-6">
<div className="flex w-full overflow-x-hidden max-w-[1800px] mx-auto overflow-hidden select-none pt-6">
<div
className="flex w-full transition-all duration-300"
style={{
client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
+3 -3
View File
@@ -1,11 +1,11 @@
function SkygardenIndoorLayout() {
return (
<img
className="zoom-280"
// className="zoom-280"
src="/images/masterplanWing/skygardenIndoor.png"
alt=""
width={672}
height={544}
width={1800}
height={1374}
/>
);
}
client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
+5 -3
View File
@@ -1,10 +1,12 @@
const SkygardenOutdoorLayout = () => {
return (
<img
className="zoom-280"
// className="zoom-280"
src="/images/masterplanWing/skygardenOutdoor.png"
width={672}
height={544}
width={1800}
height={1374}
// width={672}
// height={544}
alt=""
/>
);
client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ const ZoneSlider = () => {
}
return (
<div className="flex flex-col gap-6 pt-[1147px] pb-[96px]" {...handlers}>
<div className="flex flex-col gap-6 pt-[1747px] pb-[96px]" {...handlers}>
{/* <div className="flex flex-col gap-6 pt-[1108.5px]" {...handlers}> */}
<div className="relative col-span-full overflow-x-hidden flex flex-col h-[892px] border-b">
{/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */}
client/src/components/modals/mobile/AboutCompexMobileModal/AboutComplexMobileModal.tsx
+3 -3
View File
@@ -16,8 +16,8 @@ const AboutComplexMobileModal = ({
floor,
}: AboutComplexMobileModalProps) => {
return (
<div className="absolute min-h-screen w-screen bg-[#F3F3F2] pt-20 px-6 pb-6">
<div className="flex flex-col lg:col-span-7 col-span-full ">
<div className="absolute min-h-screen w-screen bg-[#F3F3F2] pt-20 px-6 pb-6 flex flex-col">
<div className="flex flex-col lg:col-span-7 col-span-full h-full flex-1">
{currentApartment && (
<ButtonPanel
currentApartment={currentApartment}
@@ -29,7 +29,7 @@ const AboutComplexMobileModal = ({
<ApartmentLayout currentApartment={currentApartment} />
)}
{currentApartment && (
<div className="lg:col-span-2 rounded-lg col-span-full pt-6">
<div className="lg:col-span-2 rounded-lg col-span-full pt-6 flex flex-1">
<ApartmentSidebar currentApartment={currentApartment} />
</div>
)}
client/src/components/modals/mobile/AboutCompexMobileModal/ButtonPanel.tsx
+5 -5
View File
@@ -19,7 +19,7 @@ const ButtonPanel = ({
apartments,
floor,
}: ButtonPanelProps) => {
const unitNo = currentApartment.Unit_No.split("-")[1];
// const unitNo = currentApartment.Unit_No.split("-")[1];
const [isFavorite, setIsFavorite] = useState(false);
const { setFavorites } = useFavorites();
const { setModal } = useModal();
@@ -77,7 +77,7 @@ const ButtonPanel = ({
}, [currentApartment.id]);
return (
<div className="flex justify-between w-full gap-4 items-center pb-3">
<div className="flex justify-between w-full gap-4 items-center pb-4">
<div className="flex gap-4 items-center ">
<Button
icon={<LeftArrowSliderIcon />}
@@ -85,10 +85,10 @@ const ButtonPanel = ({
onClick={handleOnBackClick}
/>
<div className="flex flex-col">
<p className="text-[#73787C] text-caption-m font-semibold">
{/* <p className="text-[#73787C] text-caption-m font-semibold">
№ {unitNo}
</p>
<h2 className="text-subheadline-s font-semibold text-[#0D1922]">
</p> */}
<h2 className="text-[67.5px] font-semibold text-[#0D1922]">
{currentApartment.Unit_Type}
</h2>
</div>
client/src/components/modals/mobile/WingFloorModal.tsx
+114 -52
View File
@@ -14,7 +14,8 @@ import WestWingTopLevelsHighlighting from "../../complexWingPage/FloorSidebar/We
import WestWingTopLevelsLayout from "../../complexWingPage/FloorSidebar/WestWingTopLevelsLayout";
import { filterCurrentApartment } from "../../../calc/filterCurrentApartment";
import MobileApartmentDescription from "../../complexWingPage/MobileApartmentDescription";
import ChevronDownIcon from "../../icons/ChevronDownIcon";
import TransparentSelector from "../../TransparentSelector";
import { IOption } from "../../../types/selectorOption";
const getDefaultApartments = (currentFloor: IDesctiptionFloor | null) => {
if (!currentFloor) return [];
@@ -64,6 +65,7 @@ const WingFloorModal = ({
);
const [isDescVisible, setIsDescVisible] = useState(false);
const [mousePos, setMousePos] = useState<number[]>([0, 0]);
const [optionsFloors, setOptionsFloors] = useState<IOption[]>([]);
const wing =
floorApartments.length > 0 &&
floorApartments[0].Unit_No.split("-")[0] === "E"
@@ -90,12 +92,6 @@ const WingFloorModal = ({
setCurrentApartmentType(apartmentType);
// const apartments = [
// ...getDefaultApartments(currentFloor),
// ...floorApartments,
// ];
// console.log("apartments", apartments);
const apartment = filterCurrentApartment(apartments, apartmentType);
if (!apartment) return;
@@ -123,6 +119,13 @@ const WingFloorModal = ({
}
}
const handleOnFloorOptionClick = (floorId: string) => {
const updatedOptions = [...optionsFloors].map((floor) => {
return { ...floor, isSelected: floor.id === floorId };
});
setOptionsFloors(updatedOptions);
};
useEffect(() => {
if (!currentFloor) return;
const defaultApartment: IAparmentRes[] = getDefaultApartments(currentFloor);
@@ -141,6 +144,49 @@ const WingFloorModal = ({
};
}, []);
useEffect(() => {
if (!currentFloor) return;
const { floor: selectedFloor } = currentFloor;
if (selectedFloor === 11) {
const floors = Array.from({ length: 4 }).map((_, index) => {
const floor: IOption = {
isSelected: index + 11 === 11,
value: `${index + 11}`,
id: `${index + 11}`,
};
return floor;
});
setOptionsFloors(floors);
return;
}
if (selectedFloor === 31) {
const floors = Array.from({ length: 4 }).map((_, index) => {
const floor: IOption = {
isSelected: index + 28 === 31,
value: `${index + 28}`,
id: `${index + 28}`,
};
return floor;
});
setOptionsFloors(floors);
return;
}
const floors = Array.from({ length: 4 }).map((_, index) => {
const floorIndex = selectedFloor - 1 + index;
const floor: IOption = {
isSelected: floorIndex === selectedFloor,
value: `${index - 1 + selectedFloor}`,
id: `${index - 1 + selectedFloor}`,
};
return floor;
});
setOptionsFloors(floors);
}, [currentFloor]);
return (
<>
<div
@@ -183,10 +229,9 @@ const WingFloorModal = ({
</div>
<div className="pt-6 flex justify-between items-center">
<div className="flex flex-col">
<TransparentSelector />
{/* <h2 className="font-semibold text-[#0D1922] text-subheadline-m">
<h2 className="font-semibold text-[#0D1922] text-subheadline-m">
{currentFloor?.floor} floor
</h2> */}
</h2>
<p className="text-s">{wing}</p>
</div>
<div className="py-[8.44px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m">
@@ -194,29 +239,48 @@ const WingFloorModal = ({
</div>
</div>
<div className="flex justify-between items-center py-2 px-4 rounded-lg bg-white">
<div className="">{currentFloor?.floor} floor</div>
<TransparentSelector
options={optionsFloors}
onClick={handleOnFloorOptionClick}
/>
<div className="flex items-center justify-center gap-6">
<div className="flex gap-2 text-[#0D1922B2] items-center">
<div className="w-[48px] h-[48px] flex items-center bg-[#A19E9E] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
1
<div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#A19E9E] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
{
floorApartments.filter(
(aprt) => aprt.Unit_Type === "Studio Flex"
).length
}
</div>
<p className="text-caption-m font-semibold">Studio flex</p>
</div>
<div className="flex gap-2 text-[#0D1922B2] items-center">
<div className="w-[48px] h-[48px] flex items-center bg-[#8299AD] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
11
<div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#8299AD] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
{
floorApartments.filter(
(aprt) => aprt.Unit_Type === "Studio Squared"
).length
}
</div>
<p className="text-caption-m font-semibold">Studio</p>
</div>
<div className="flex gap-2 text-[#0D1922B2] items-center">
<div className="w-[48px] h-[48px] flex items-center bg-[#BFC9D1] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
3
<div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#BFC9D1] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
{
floorApartments.filter(
(aprt) => aprt.Unit_Type === "1 BR Squared"
).length
}
</div>
<p className="text-caption-m font-semibold">1 Bedroom</p>
</div>
<div className="flex gap-2 text-[#0D1922B2] items-center">
<div className="w-[48px] h-[48px] flex items-center bg-[#878FA3] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
7
<div className="w-[48px] h-[48px] text-caption-m flex items-center bg-[#878FA3] text-white justify-center rounded-full pt-[1.5px] pb-[2.5px]">
{
floorApartments.filter(
(aprt) => aprt.Unit_Type === "2 BR Squared"
).length
}
</div>
<p className="text-caption-m font-semibold">2 Bedroom</p>
</div>
@@ -274,40 +338,38 @@ const WingFloorModal = ({
</>
);
};
interface IOption {
id: string;
value: string;
isSelected: boolean;
}
interface TransparentSelectorProps {
options: IOption;
setOptions: React.Dispatch<React.SetStateAction<IOption[]>>;
}
// const TransparentSelector = ({
// options,
// setOptions,
// }: TransparentSelectorProps) => {
// const [isOpened, setIsOpened] = useState(false);
// const handleOnClick = () => {
// setIsOpened((prev) => !prev);
// };
const TransparentSelector = ({
options,
setOptions,
}: TransparentSelectorProps) => {
const [isOpened, setIsOpened] = useState(false);
const handleOnClick = () => {
setIsOpened((prev) => !prev);
};
return (
<>
<div
className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
onClick={handleOnClick}
>
<p>11 floor</p>
<div className="zoom-280">
<ChevronDownIcon />
</div>
</div>
{isOpened && <div className="flex flex-col"></div>}
</>
);
};
// return (
// <div className="relative">
// <div
// className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
// onClick={handleOnClick}
// >
// <p>11 floor</p>
// <div
// className={`zoom-280 ease-in-out duration-300 transition-transform ${
// isOpened ? "-rotate-180" : ""
// }`}
// >
// <ChevronDownIcon />
// </div>
// </div>
// {isOpened && (
// <div className="flex flex-col bg-black p-[19.2px] absolute -bottom-[49px]">
// {options.map}
// </div>
// )}
// </div>
// );
// };
export default WingFloorModal;
client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const ButtomPanelCompassVirtualTour = () => {
<Button
text="Disclaimer"
buttonType="special"
className="pl-2"
className="pl-[8px]"
icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick}
/>
client/src/index.css
+4
View File
@@ -54,6 +54,10 @@ html {
zoom: 280%;
}
.list-shadow {
box-shadow: 0px 4.8px 19.2px 0px #00000026;
}
.desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026;
}
client/src/pages/AboutComplex.tsx
+7 -13
View File
@@ -6,8 +6,6 @@ import LivingSolutionSlider from "../components/aboutComplex/LivingSolutionSlide
import RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
import { useNavigate } from "react-router-dom";
const isMobile = true;
interface ICityItem {
time: number;
title: string;
@@ -129,12 +127,8 @@ const AboutComplex = () => {
return (
<>
<section
className={`xl:pt-16 sm:pt-10 font-usual ${
isMobile ? "pt-16" : ""
} grid grid-cols-12 select-none`}
>
<div className="flex px-6 py-4 col-span-full h-16 relative">
<section className={`xl:pt-16 font-usual grid grid-cols-12 select-none`}>
<div className="flex px-6 py-4 col-span-full h-[180px] relative">
<div className="fixed z-[100]">
<Button
onClick={handleOnBackClick}
@@ -145,23 +139,23 @@ const AboutComplex = () => {
</div>
</div>
{/* About Rove Home */}
<h1 className="uppercase xl:rubber-headline-indent text-headline-s xl:px-6 px-4 col-span-full pb-6">
<h1 className="uppercase text-headline-s px-4 col-span-full pb-6">
Rove Home this residence a complete ecosystem that has everything
you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
thrive.
</h1>
<div className="col-span-full px-6 grid grid-cols-12">
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 uppercase col-span-full pb-3">
<div className="text-caption-m font-semibold text-[#73787C] uppercase col-span-full pb-3">
About rove home
</div>
<div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6 xl:pb-[100px] sm:pb-16 pb-20">
<div className="col-span-full grid grid-cols-10 gap-6 pb-20">
<img
src="/images/aboutCompany/rovehome.png"
alt=""
className="col-span-full"
/>
<div className="xl:col-span-4 sm:col-span-6 col-span-full text-l text-[#73787C]">
<div className="col-span-5 text-s text-[#73787C]">
Embrace Rove’s forever-young spirit at Rove Home, where inspiring
design and vibrant art installations converge with an exceptional
location and an extended playlist of life-enhancing{" "}
@@ -171,7 +165,7 @@ const AboutComplex = () => {
{/* RoveHome roof */}
<RoveHomeSlider />
{/* Rove around the city */}
<div className="col-span-full px-6 grid grid-cols-12 xl:pt-[100px] sm:pt-16 pt-14">
<div className="col-span-full px-6 grid grid-cols-12 pt-14">
<div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
ROVE AROUND THE CITY
</div>
client/src/types/selectorOption.ts
+7
View File
@@ -0,0 +1,7 @@
interface IOption {
id: string;
value: string;
isSelected: boolean;
}
export type { IOption };
client/tailwind.config.js
+7
View File
@@ -16,6 +16,7 @@ export default {
4: "45px",
3: "33.75px",
2: "22.5px",
16: "180px",
},
margin: {
6: "67.5px",
@@ -23,9 +24,11 @@ export default {
4: "45px",
3: "33.75px",
2: "22.5px",
16: "180px",
},
gap: {
2: "22.5px",
3: "33.75px",
4: "45px",
8: "90px",
6: "67.5px",
@@ -47,6 +50,10 @@ export default {
fontSize: {
xs: "28.8px",
},
inset: {
6: "67.5px",
4: "45px",
},
},
},
plugins: [],