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 ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
const navigate = useNavigate(); const navigate = useNavigate();
const unitNo = currentApartment.Unit_No.split("-")[1]; // const unitNo = currentApartment.Unit_No.split("-")[1];
const wing = const wing =
currentApartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing"; currentApartment.Unit_No.split("-")[0] === "E" ? "East Wing" : "West Wing";
@@ -18,11 +18,16 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
}; };
return ( 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"> <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"> <div className="absolute top-[67.5px] left-6 flex flex-col">
View from window <p className=" font-semibold text-[33.75px] text-white">
</p> View from window
</p>
<p className=" font-semibold text-[56.25px] text-white">
Burj Khalifa
</p>
</div>
<img <img
src="/images/view_from_window.png" src="/images/view_from_window.png"
alt="" alt=""
@@ -30,37 +35,69 @@ const ApartmentSidebar = ({ currentApartment }: ApartmentSidebarProps) => {
/> />
</div> </div>
<div className="flex gap-2 flex-col flex-1 w-1/2 aspect-square"> <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"> <div className="flex flex-col rounded-2xl bg-white p-6 h-full">
<h2 className="font-semibold text-[#0D1922] text-subheadline-s"> <h2 className="text-[56.25px] text-[#0D1922] font-semibold leading-[78.75px]">
Parameters {currentApartment.Unit_Type}, {currentApartment.Total_Area_Sqft}{" "}
Sqft
</h2> </h2>
<div className="flex flex-col gap-3"> <p className="text-[39.2px] text-[#00BED7] font-normal leading-[55.12px] pt-[22.5px]">
<div className="flex justify-between text-m"> {currentApartment.Project_Name}
<p className="text-[#73787C]">Complex</p> </p>
<p className="text-[#0D1922]">{currentApartment.Project_Name}</p> <div className="flex gap-2 items-center pt-1 pb-4 border-b">
</div> <p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
<div className="flex justify-between text-m"> {wing}
<p className="text-[#73787C]">Section</p> </p>
<p className="text-[#0D1922]">{wing}</p> <div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
</div> <p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
<div className="flex justify-between text-m"> Floor {currentApartment.Floor}
<p className="text-[#73787C]">Floor</p> </p>
<p className="text-[#0D1922]">{currentApartment.Floor}</p> <div className="bg-[#E2E2DC] w-[11.25px] h-[11.25px] rounded-full"></div>
</div> <p className="text-[#0D1922B2] font-semibold text-[33.75px] ">
<div className="flex justify-between text-m"> {currentApartment.Unit_No}
<p className="text-[#73787C]">Number</p> </p>
<p className="text-[#0D1922]">{unitNo}</p> </div>
</div> <div className="pt-6 flex flex-col gap-3">
<div className="flex justify-between text-m"> <div className="flex justify-between">
<p className="text-[#73787C]">Size</p> <p className="text-[#0D192266] text-[45px] leading-[56.25px]">
<p className="text-[#0D1922]"> Total Area
</p>
<p className="text-[#0D1922] text-[45px] leading-[56.25px]">
{currentApartment.Total_Area_Sqft} Sqft {currentApartment.Total_Area_Sqft} Sqft
</p> </p>
</div> </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> </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 Unvailiable
{/* AED {formatNumber(1668888, ",", 3, 1)} */}
</p> </p>
</div> </div>
<div className="rounded-2xl bg-white flex flex-col p-6 gap-4 flex-1 lg:flex-none justify-between"> <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 <Button
text="Disclaimer" text="Disclaimer"
buttonType="special" buttonType="special"
className="pl-2" className="pl-[8px]"
icon={<DisclaimerIcon />} icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick} onClick={handleOnDisclaimerClick}
isCircleRounded isCircleRounded
client/src/components/ButtomPanelCompass.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ const ButtomPanelCompass = () => {
text="Disclaimer" text="Disclaimer"
buttonType="special" buttonType="special"
isCircleRounded isCircleRounded
className="pl-2" className="pl-[8px]"
icon={<DisclaimerIcon />} icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick} onClick={handleOnDisclaimerClick}
/> />
client/src/components/Button.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ const Button = ({
onClick={onClick} onClick={onClick}
className={`zoom-280 min-w-[40px] max-h-[40px] ${rounded} ${ className={`zoom-280 min-w-[40px] max-h-[40px] ${rounded} ${
icon && !text ? "p-[10px] " : padding 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 : "" className ? className : ""
}`} }`}
> >
client/src/components/Checkbox.tsx
+8 -8
View File
@@ -11,36 +11,36 @@ const Checkbox = ({ onClick, checkbox }: CheckboxProps) => {
return ( return (
<div <div
onClick={() => onClick(checkbox.id)} 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 checkbox.disabled
? "pointer-events-none touch-none" ? "pointer-events-none touch-none"
: "hover:bg-[#F3F3F2] cursor-pointer" : "hover:bg-[#F3F3F2] cursor-pointer"
}`} }`}
> >
<div className="flex gap-3"> <div className="flex gap-[12px]">
{checkbox.disabled ? ( {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 /> <MinusIcon />
</div> </div>
) : ( ) : (
<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 ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
}`} }`}
> >
{checkbox.selected ? <SelectedCheckboxIcon /> : <></>} {checkbox.selected ? <SelectedCheckboxIcon /> : <></>}
</div> </div>
)} )}
<p className="text-s text-[#73787C]">{checkbox.title}</p> <p className="text-[16px] text-[#73787C]">{checkbox.title}</p>
</div> </div>
{!checkbox.disabled ? ( {!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="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-1"> <div className="h-fit align-middle text-center flex items-center justify-center leading-[4px]">
8 8
</div> </div>
</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"> <div className="h-fit align-middle text-center flex">
<MinusIcon /> <MinusIcon />
</div> </div>
client/src/components/MultiRangeSlider.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ const MultiRangeSlider = ({
return ( return (
<div className="zoom-280"> <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"> <div className="flex justify-between">
<NumericFormat <NumericFormat
thousandSeparator="," thousandSeparator=","
@@ -94,7 +94,7 @@ const MultiRangeSlider = ({
value={[multirangeSlider.startValue, multirangeSlider.endValue]} value={[multirangeSlider.startValue, multirangeSlider.endValue]}
className={`${ className={`${
isDisabled ? "pointer-events-none text disabled" : "" 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} onInput={handleOnRangeInputChange}
/> />
</div> </div>
client/src/components/Switch.tsx
+2 -2
View File
@@ -12,13 +12,13 @@ const Switch = ({ switcher, onClick }: ISwitchProps) => {
return ( return (
<div <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]" switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
}`} }`}
onClick={handleOnClick} onClick={handleOnClick}
> >
<div <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]"}`} ${switcher.isSwitched ? "left-[18px]" : "left-[2px]"}`}
></div> ></div>
</div> </div>
client/src/components/SwitchToggle.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ function SwitchToggle({
lab.id === currentLabel.id lab.id === currentLabel.id
? "bg-[#00BED7] text-white" ? "bg-[#00BED7] text-white"
: `${isDisabled ? "text-[#0D192266]" : ""}` : `${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} {lab.label}
</div> </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="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"> <div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center">
<img <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} src={imageLayout ? imageLayout : apartmentLayoutImage}
alt="" alt=""
/> />
@@ -37,7 +37,7 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
<img <img
src="/images/compass.png" src="/images/compass.png"
alt="" alt=""
className="absolute right-10 bottom-10" className="absolute right-10 bottom-10 zoom-280"
/> />
<SwitchToggle <SwitchToggle
isDisabled isDisabled
client/src/components/complexPage/SequenceSlider.tsx
+2 -2
View File
@@ -251,7 +251,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
</div> </div>
<Button <Button
disabled={isAnimate} 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" isAnimate ? "opacity-50" : "opacity-100"
}`} }`}
isCircleRounded isCircleRounded
@@ -261,7 +261,7 @@ function SequenceSlider({ path }: SequenceSliderProps) {
/> />
<Button <Button
disabled={isAnimate} 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" isAnimate ? "opacity-50" : "opacity-100"
}`} }`}
buttonType="fab" 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 react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-explicit-any */
import { MouseEvent, useEffect, useState } from "react"; import { MouseEvent, useEffect, useState } from "react";
import { useDebounce } from "@uidotdev/usehooks";
import { IDesctiptionFloor } from "../../../types/descriptionFloor"; import { IDesctiptionFloor } from "../../../types/descriptionFloor";
import useModal from "../../../store/useModal"; import useModal from "../../../store/useModal";
import { descriptions } from "../../../consts/masterplan"; import { descriptions } from "../../../consts/masterplan";
@@ -9,7 +10,6 @@ import { IAparmentRes } from "../../../types/apartmentsRes";
import useMasterplanFilters from "../../../store/useMasterplanFilters"; import useMasterplanFilters from "../../../store/useMasterplanFilters";
import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilters"; import { initialRoveHomeCheckboxes } from "../../../consts/initialMasterplanFilters";
import { pageInitial } from "../../../consts/initialMasterplanFilters"; import { pageInitial } from "../../../consts/initialMasterplanFilters";
import { useDebounce } from "@uidotdev/usehooks";
import { getFilteredApartments } from "../../../calc/getFilteredApartments"; import { getFilteredApartments } from "../../../calc/getFilteredApartments";
import FloorNumbers from "./FloorNumbers"; import FloorNumbers from "./FloorNumbers";
import WingSignatures from "./WingSignatures"; import WingSignatures from "./WingSignatures";
@@ -189,7 +189,7 @@ const SequenceWing = () => {
setModal( setModal(
<WingFloorModal <WingFloorModal
currentFloor={currentHoveredFloor} currentFloor={currentHoveredFloor}
floorApartments={apartments} floorApartments={currentHoveredApartments}
/> />
); );
setIsDescriptionFloorMobile(false); setIsDescriptionFloorMobile(false);
client/src/components/complexWingPage/SkygardenSidebar/LayoutSlider.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const LayoutSlider = () => {
currentLabel={currentLabel} currentLabel={currentLabel}
onClick={handleOnSwitchClick} 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 <div
className="flex w-full transition-all duration-300" className="flex w-full transition-all duration-300"
style={{ style={{
client/src/components/complexWingPage/SkygardenSidebar/SkygardenIndoorLayout.tsx
+3 -3
View File
@@ -1,11 +1,11 @@
function SkygardenIndoorLayout() { function SkygardenIndoorLayout() {
return ( return (
<img <img
className="zoom-280" // className="zoom-280"
src="/images/masterplanWing/skygardenIndoor.png" src="/images/masterplanWing/skygardenIndoor.png"
alt="" alt=""
width={672} width={1800}
height={544} height={1374}
/> />
); );
} }
client/src/components/complexWingPage/SkygardenSidebar/SkygardenOutdoorLayout.tsx
+5 -3
View File
@@ -1,10 +1,12 @@
const SkygardenOutdoorLayout = () => { const SkygardenOutdoorLayout = () => {
return ( return (
<img <img
className="zoom-280" // className="zoom-280"
src="/images/masterplanWing/skygardenOutdoor.png" src="/images/masterplanWing/skygardenOutdoor.png"
width={672} width={1800}
height={544} height={1374}
// width={672}
// height={544}
alt="" alt=""
/> />
); );
client/src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ const ZoneSlider = () => {
} }
return ( 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="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-[892px] border-b">
{/* <div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] "> */} {/* <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, floor,
}: AboutComplexMobileModalProps) => { }: AboutComplexMobileModalProps) => {
return ( return (
<div className="absolute min-h-screen w-screen bg-[#F3F3F2] pt-20 px-6 pb-6"> <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 "> <div className="flex flex-col lg:col-span-7 col-span-full h-full flex-1">
{currentApartment && ( {currentApartment && (
<ButtonPanel <ButtonPanel
currentApartment={currentApartment} currentApartment={currentApartment}
@@ -29,7 +29,7 @@ const AboutComplexMobileModal = ({
<ApartmentLayout currentApartment={currentApartment} /> <ApartmentLayout currentApartment={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} /> <ApartmentSidebar currentApartment={currentApartment} />
</div> </div>
)} )}
client/src/components/modals/mobile/AboutCompexMobileModal/ButtonPanel.tsx
+5 -5
View File
@@ -19,7 +19,7 @@ const ButtonPanel = ({
apartments, apartments,
floor, floor,
}: ButtonPanelProps) => { }: ButtonPanelProps) => {
const unitNo = currentApartment.Unit_No.split("-")[1]; // const unitNo = currentApartment.Unit_No.split("-")[1];
const [isFavorite, setIsFavorite] = useState(false); const [isFavorite, setIsFavorite] = useState(false);
const { setFavorites } = useFavorites(); const { setFavorites } = useFavorites();
const { setModal } = useModal(); const { setModal } = useModal();
@@ -77,7 +77,7 @@ const ButtonPanel = ({
}, [currentApartment.id]); }, [currentApartment.id]);
return ( 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 "> <div className="flex gap-4 items-center ">
<Button <Button
icon={<LeftArrowSliderIcon />} icon={<LeftArrowSliderIcon />}
@@ -85,10 +85,10 @@ const ButtonPanel = ({
onClick={handleOnBackClick} onClick={handleOnBackClick}
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<p className="text-[#73787C] text-caption-m font-semibold"> {/* <p className="text-[#73787C] text-caption-m font-semibold">
№ {unitNo} № {unitNo}
</p> </p> */}
<h2 className="text-subheadline-s font-semibold text-[#0D1922]"> <h2 className="text-[67.5px] font-semibold text-[#0D1922]">
{currentApartment.Unit_Type} {currentApartment.Unit_Type}
</h2> </h2>
</div> </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 WestWingTopLevelsLayout from "../../complexWingPage/FloorSidebar/WestWingTopLevelsLayout";
import { filterCurrentApartment } from "../../../calc/filterCurrentApartment"; import { filterCurrentApartment } from "../../../calc/filterCurrentApartment";
import MobileApartmentDescription from "../../complexWingPage/MobileApartmentDescription"; import MobileApartmentDescription from "../../complexWingPage/MobileApartmentDescription";
import ChevronDownIcon from "../../icons/ChevronDownIcon"; import TransparentSelector from "../../TransparentSelector";
import { IOption } from "../../../types/selectorOption";
const getDefaultApartments = (currentFloor: IDesctiptionFloor | null) => { const getDefaultApartments = (currentFloor: IDesctiptionFloor | null) => {
if (!currentFloor) return []; if (!currentFloor) return [];
@@ -64,6 +65,7 @@ const WingFloorModal = ({
); );
const [isDescVisible, setIsDescVisible] = useState(false); const [isDescVisible, setIsDescVisible] = useState(false);
const [mousePos, setMousePos] = useState<number[]>([0, 0]); const [mousePos, setMousePos] = useState<number[]>([0, 0]);
const [optionsFloors, setOptionsFloors] = useState<IOption[]>([]);
const wing = const wing =
floorApartments.length > 0 && floorApartments.length > 0 &&
floorApartments[0].Unit_No.split("-")[0] === "E" floorApartments[0].Unit_No.split("-")[0] === "E"
@@ -90,12 +92,6 @@ const WingFloorModal = ({
setCurrentApartmentType(apartmentType); setCurrentApartmentType(apartmentType);
// const apartments = [
// ...getDefaultApartments(currentFloor),
// ...floorApartments,
// ];
// console.log("apartments", apartments);
const apartment = filterCurrentApartment(apartments, apartmentType); const apartment = filterCurrentApartment(apartments, apartmentType);
if (!apartment) return; 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(() => { useEffect(() => {
if (!currentFloor) return; if (!currentFloor) return;
const defaultApartment: IAparmentRes[] = getDefaultApartments(currentFloor); 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 ( return (
<> <>
<div <div
@@ -183,10 +229,9 @@ const WingFloorModal = ({
</div> </div>
<div className="pt-6 flex justify-between items-center"> <div className="pt-6 flex justify-between items-center">
<div className="flex flex-col"> <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 {currentFloor?.floor} floor
</h2> */} </h2>
<p className="text-s">{wing}</p> <p className="text-s">{wing}</p>
</div> </div>
<div className="py-[8.44px] px-2 text-white bg-[#00BED7] rounded-full text-caption-m"> <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> </div>
<div className="flex justify-between items-center py-2 px-4 rounded-lg bg-white"> <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 items-center justify-center gap-6">
<div className="flex gap-2 text-[#0D1922B2] items-center"> <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]"> <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]">
1 {
floorApartments.filter(
(aprt) => aprt.Unit_Type === "Studio Flex"
).length
}
</div> </div>
<p className="text-caption-m font-semibold">Studio flex</p> <p className="text-caption-m font-semibold">Studio flex</p>
</div> </div>
<div className="flex gap-2 text-[#0D1922B2] items-center"> <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]"> <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]">
11 {
floorApartments.filter(
(aprt) => aprt.Unit_Type === "Studio Squared"
).length
}
</div> </div>
<p className="text-caption-m font-semibold">Studio</p> <p className="text-caption-m font-semibold">Studio</p>
</div> </div>
<div className="flex gap-2 text-[#0D1922B2] items-center"> <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]"> <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]">
3 {
floorApartments.filter(
(aprt) => aprt.Unit_Type === "1 BR Squared"
).length
}
</div> </div>
<p className="text-caption-m font-semibold">1 Bedroom</p> <p className="text-caption-m font-semibold">1 Bedroom</p>
</div> </div>
<div className="flex gap-2 text-[#0D1922B2] items-center"> <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]"> <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]">
7 {
floorApartments.filter(
(aprt) => aprt.Unit_Type === "2 BR Squared"
).length
}
</div> </div>
<p className="text-caption-m font-semibold">2 Bedroom</p> <p className="text-caption-m font-semibold">2 Bedroom</p>
</div> </div>
@@ -274,40 +338,38 @@ const WingFloorModal = ({
</> </>
); );
}; };
interface IOption {
id: string;
value: string;
isSelected: boolean;
}
interface TransparentSelectorProps { // const TransparentSelector = ({
options: IOption; // options,
setOptions: React.Dispatch<React.SetStateAction<IOption[]>>; // setOptions,
} // }: TransparentSelectorProps) => {
// const [isOpened, setIsOpened] = useState(false);
// const handleOnClick = () => {
// setIsOpened((prev) => !prev);
// };
const TransparentSelector = ({ // return (
options, // <div className="relative">
setOptions, // <div
}: TransparentSelectorProps) => { // className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none"
const [isOpened, setIsOpened] = useState(false); // onClick={handleOnClick}
const handleOnClick = () => { // >
setIsOpened((prev) => !prev); // <p>11 floor</p>
}; // <div
// className={`zoom-280 ease-in-out duration-300 transition-transform ${
return ( // isOpened ? "-rotate-180" : ""
<> // }`}
<div // >
className="text-[#00BED7] text-[38.4px] flex gap-[19.2px] items-center justify-center cursor-pointer select-none" // <ChevronDownIcon />
onClick={handleOnClick} // </div>
> // </div>
<p>11 floor</p> // {isOpened && (
<div className="zoom-280"> // <div className="flex flex-col bg-black p-[19.2px] absolute -bottom-[49px]">
<ChevronDownIcon /> // {options.map}
</div> // </div>
</div> // )}
{isOpened && <div className="flex flex-col"></div>} // </div>
</> // );
); // };
};
export default WingFloorModal; export default WingFloorModal;
client/src/components/virtualTour/ButtomPanelCompassVirualTour.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const ButtomPanelCompassVirtualTour = () => {
<Button <Button
text="Disclaimer" text="Disclaimer"
buttonType="special" buttonType="special"
className="pl-2" className="pl-[8px]"
icon={<DisclaimerIcon />} icon={<DisclaimerIcon />}
onClick={handleOnDisclaimerClick} onClick={handleOnDisclaimerClick}
/> />
client/src/index.css
+4
View File
@@ -54,6 +54,10 @@ html {
zoom: 280%; zoom: 280%;
} }
.list-shadow {
box-shadow: 0px 4.8px 19.2px 0px #00000026;
}
.desc-shadow { .desc-shadow {
box-shadow: 0px 4px 20px 1px #00000026; 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 RoveHomeSlider from "../components/aboutComplex/RoveHomeSlider";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
const isMobile = true;
interface ICityItem { interface ICityItem {
time: number; time: number;
title: string; title: string;
@@ -129,12 +127,8 @@ const AboutComplex = () => {
return ( return (
<> <>
<section <section className={`xl:pt-16 font-usual grid grid-cols-12 select-none`}>
className={`xl:pt-16 sm:pt-10 font-usual ${ <div className="flex px-6 py-4 col-span-full h-[180px] relative">
isMobile ? "pt-16" : ""
} grid grid-cols-12 select-none`}
>
<div className="flex px-6 py-4 col-span-full h-16 relative">
<div className="fixed z-[100]"> <div className="fixed z-[100]">
<Button <Button
onClick={handleOnBackClick} onClick={handleOnBackClick}
@@ -145,23 +139,23 @@ const AboutComplex = () => {
</div> </div>
</div> </div>
{/* About Rove Home */} {/* 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 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 you’ll ever need. This isn’t just where you’ll live. It’s where you’ll
thrive. thrive.
</h1> </h1>
<div className="col-span-full px-6 grid grid-cols-12"> <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 About rove home
</div> </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 <img
src="/images/aboutCompany/rovehome.png" src="/images/aboutCompany/rovehome.png"
alt="" alt=""
className="col-span-full" 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 Embrace Rove’s forever-young spirit at Rove Home, where inspiring
design and vibrant art installations converge with an exceptional design and vibrant art installations converge with an exceptional
location and an extended playlist of life-enhancing{" "} location and an extended playlist of life-enhancing{" "}
@@ -171,7 +165,7 @@ const AboutComplex = () => {
{/* RoveHome roof */} {/* RoveHome roof */}
<RoveHomeSlider /> <RoveHomeSlider />
{/* Rove around the city */} {/* 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"> <div className="text-caption-m font-semibold text-[#73787C] xl:col-span-1 col-span-full uppercase pb-3">
ROVE AROUND THE CITY ROVE AROUND THE CITY
</div> </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", 4: "45px",
3: "33.75px", 3: "33.75px",
2: "22.5px", 2: "22.5px",
16: "180px",
}, },
margin: { margin: {
6: "67.5px", 6: "67.5px",
@@ -23,9 +24,11 @@ export default {
4: "45px", 4: "45px",
3: "33.75px", 3: "33.75px",
2: "22.5px", 2: "22.5px",
16: "180px",
}, },
gap: { gap: {
2: "22.5px", 2: "22.5px",
3: "33.75px",
4: "45px", 4: "45px",
8: "90px", 8: "90px",
6: "67.5px", 6: "67.5px",
@@ -47,6 +50,10 @@ export default {
fontSize: { fontSize: {
xs: "28.8px", xs: "28.8px",
}, },
inset: {
6: "67.5px",
4: "45px",
},
}, },
}, },
plugins: [], plugins: [],