upd
This commit is contained in:
@@ -1,12 +1,15 @@
|
||||
import { formattedUnitTypes } from "../data/formattedUnitTypes";
|
||||
import { FloorsData } from "./FloorSelect";
|
||||
import HumanIcon from "./icons/HumanIcon";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
|
||||
interface FloorMarkerProps {
|
||||
title: string | null;
|
||||
position: [number, number];
|
||||
data: FloorsData;
|
||||
}
|
||||
|
||||
function FloorPopup({ title, position }: FloorMarkerProps) {
|
||||
function FloorPopup({ title, position, data }: FloorMarkerProps) {
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{title && (
|
||||
@@ -19,7 +22,7 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
|
||||
style={{ top: position[1], left: position[0] }}
|
||||
className="absolute z-100 2xl:rounded-[1.111vw] 2xl:p-[1.111vw] p-4 rounded-2xl flex flex-col 2xl:gap-[1.111vw] bg-white transition-opacity duration-300 -translate-x-[calc(100%+1.25vw)] -translate-y-1/2 2xl:w-[17.222vw] md:max-2xl:w-70 w-screen"
|
||||
>
|
||||
<div className="2xl:space-y-[0.556vw]">
|
||||
<div className="2xl:space-y-[0.556vw] space-y-2">
|
||||
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
||||
<p className="font-medium text-h5">
|
||||
{Number.isNaN(+title.split(" ").at(-1)!)
|
||||
@@ -34,9 +37,12 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
|
||||
</div>
|
||||
<div className="flex 2xl:gap-[0.278vw] gap-1">
|
||||
<p className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#F3F3F2] 2xl:rounded-[0.278vw] rounded text-caption-s text-[#0D1922]/70">
|
||||
{title && Number.isNaN((+title!.split(" ").at(-1)!)!)
|
||||
{title && Number.isNaN(+title!.split(" ").at(-1)!)
|
||||
? "16 Amenties"
|
||||
: `8 apartments`}
|
||||
: `${
|
||||
data[title.split(" ")[0] === "East" ? "east" : "west"]
|
||||
.totalUnits
|
||||
} apartments`}
|
||||
</p>
|
||||
{!Number.isNaN(+title.split(" ").at(-1)!) && (
|
||||
<div className="2xl:px-[0.556vw] 2xl:py-[0.278vw] px-2 py-0.5 bg-[#30B216]/8 2xl:rounded-[0.278vw] rounded flex 2xl:gap-[0.278vw] gap-1">
|
||||
@@ -48,39 +54,24 @@ function FloorPopup({ title, position }: FloorMarkerProps) {
|
||||
)}
|
||||
</div>
|
||||
<hr className="border-[#E2E2DC] 2xl:h-[0.069vw] h-px" />
|
||||
<div className="2xl:space-y-[0.556vw]">
|
||||
<div className="2xl:space-y-[0.556vw] space-y-2">
|
||||
{!Number.isNaN(+title.split(" ").at(-1)!) ? (
|
||||
<>
|
||||
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
||||
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
4
|
||||
</p>
|
||||
<p className="text-caption-m text-[#0D1922]/70">
|
||||
Studio Flex
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
||||
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
4
|
||||
</p>
|
||||
<p className="text-caption-m text-[#0D1922]/70">Studio²</p>
|
||||
</div>
|
||||
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
||||
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
4
|
||||
</p>
|
||||
<p className="text-caption-m text-[#0D1922]/70">
|
||||
1 Bedroom²
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
||||
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
2
|
||||
</p>
|
||||
<p className="text-caption-m text-[#0D1922]/70">
|
||||
2 Bedroom²
|
||||
</p>
|
||||
</div>
|
||||
{Object.entries(
|
||||
data[title.split(" ")[0] === "East" ? "east" : "west"].types
|
||||
).map(([unitType, count]) => (
|
||||
<div
|
||||
className="flex 2xl:gap-[0.556vw] gap-2"
|
||||
key={unitType}
|
||||
>
|
||||
<p className="bg-[#00BED7] rounded-full flex justify-center items-center font-mono text-caption-s text-white 2xl:w-[1.111vw] 2xl:h-[1.111vw] w-4 h-4">
|
||||
{count}
|
||||
</p>
|
||||
<p className="text-caption-m text-[#0D1922]/70">
|
||||
{formattedUnitTypes.get(unitType)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useRef, useState } from "react";
|
||||
import { markers } from "../data/markers";
|
||||
import { floorsMasks } from "../data/masks";
|
||||
import Compass from "./Compass";
|
||||
@@ -13,6 +13,18 @@ import FloorPopup from "./FloorPopup";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { api } from "../api/ky";
|
||||
|
||||
export interface FloorsData {
|
||||
floor: number;
|
||||
west: {
|
||||
types: Record<string, number>;
|
||||
totalUnits: number;
|
||||
};
|
||||
east: {
|
||||
types: Record<string, number>;
|
||||
totalUnits: number;
|
||||
};
|
||||
}
|
||||
|
||||
function FloorSelect({ complexName }: { complexName: string }) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
@@ -43,14 +55,15 @@ function FloorSelect({ complexName }: { complexName: string }) {
|
||||
queryKey: ["floors-data", complexName],
|
||||
queryFn: () =>
|
||||
api
|
||||
.get(`units/get-floors-data/${complexName}`)
|
||||
.json<({ floor: number } & Record<string, number>)[]>(),
|
||||
.get(
|
||||
`units/get-floors-data/Rove Home ${complexName
|
||||
.split("-")
|
||||
.map((w) => w[0].toUpperCase() + w.slice(1))
|
||||
.join(" ")}`
|
||||
)
|
||||
.json<FloorsData[]>(),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log(data);
|
||||
}, [data]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="overflow-hidden h-full w-full relative"
|
||||
@@ -58,7 +71,7 @@ function FloorSelect({ complexName }: { complexName: string }) {
|
||||
onMouseMove={handleMouseMove}
|
||||
>
|
||||
<img
|
||||
src={`/images/marasi-drive-floors.png`}
|
||||
src={`/images/${complexName}-floors.png`}
|
||||
className="h-full w-full object-cover absolute"
|
||||
alt=""
|
||||
/>
|
||||
@@ -85,7 +98,7 @@ function FloorSelect({ complexName }: { complexName: string }) {
|
||||
<Button
|
||||
variant="secondary"
|
||||
className="!bg-white"
|
||||
onClick={() => navigate(`/complex/${complexName}/`)}
|
||||
onClick={() => navigate(`/complex/${complexName}`)}
|
||||
>
|
||||
<span className="2xl:w-[1.389vw] 2xl:h-[1.389vw] w-5 h-5">
|
||||
<ArrowLeftIcon />
|
||||
@@ -115,7 +128,17 @@ function FloorSelect({ complexName }: { complexName: string }) {
|
||||
onClick={handleFullScreenClick}
|
||||
/>
|
||||
</div>
|
||||
<FloorPopup title={hoveredFloor} position={position} />
|
||||
{data && hoveredFloor && (
|
||||
<FloorPopup
|
||||
title={hoveredFloor}
|
||||
position={position}
|
||||
data={
|
||||
data.find(
|
||||
({ floor }) => floor === +hoveredFloor!.split(" ").at(-1)!
|
||||
)!
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import { create } from "zustand";
|
||||
|
||||
interface PopupStore {
|
||||
popup: React.ReactNode | null;
|
||||
setPopup: (popup: React.ReactNode) => void;
|
||||
position: { x: number; y: number };
|
||||
setPosition: (position: { x: number; y: number }) => void;
|
||||
}
|
||||
|
||||
export const usePopupStore = create<PopupStore>((set) => ({
|
||||
popup: null,
|
||||
setPopup: (popup: React.ReactNode) => set({ popup }),
|
||||
position: { x: 0, y: 0 },
|
||||
setPosition: (position: { x: number; y: number }) => set({ position }),
|
||||
}));
|
||||
Reference in New Issue
Block a user