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

rotate floor description

Browse Source
This commit is contained in:
zojgame
2024-05-13 12:43:10 +05:00
parent 1888864763
commit d1b4f98429
3 changed files with 133 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/complexWingPage/FloorDescription.tsx
+131 -53
View File
@@ -1,3 +1,4 @@
import useWingSidebar from "../../store/useWingSidebar";
import { IDesctiptionFloor } from "../../types/descriptionFloor";
interface FloorDescriptionProps {
@@ -5,73 +6,150 @@ interface FloorDescriptionProps {
}
const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
const { isSidebar } = useWingSidebar();
return (
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<div className="flex flex-col">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}
>
{descriptionFloor?.floor} Floor
</p>
<p className="text-[#73787C] font-semibold text-caption-m">
{descriptionFloor?.wing}
</p>
<>
{/* <div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute transition-opacity duration-300 delay-100 ${
isSidebar && descriptionFloor?.wing === "West Wing"
? "opacity-0"
: "opacity-0"
}`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<div className="flex flex-col">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}
>
{descriptionFloor?.floor} Floor
</p>
<p className="text-[#73787C] font-semibold text-caption-m">
{descriptionFloor?.wing}
</p>
</div>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
234 units
</div>
</div>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
234 units
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">21</p>
</div>
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,048,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
56
</p>
</div>
<p className="text-s text-[#73787C]">Studio</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,138,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
89
</p>
</div>
<p className="text-s text-[#73787C]">1 Bedroom</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,668,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
10
</p>
</div>
<p className="text-s text-[#73787C]">2 Bedroom, Type A</p>
</div>
<p className="text-s text-[#0D1922]">AED 2,408,888</p>
</div>
</div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white rotate-90 absolute top-0 -right-[35px]"></div>
</div>
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">21</p>
</div>
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
</div> */}
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute left-[414px] transition-opacity duration-300 delay-100 ${
isSidebar && descriptionFloor?.wing === "West Wing"
? "opacity-100"
: "opacity-100"
}`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<div className="flex flex-col">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out`}
>
{descriptionFloor?.floor} Floor
</p>
<p className="text-[#73787C] font-semibold text-caption-m">
{descriptionFloor?.wing}
</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,048,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
56
</p>
</div>
<p className="text-s text-[#73787C]">Studio</p>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white justify-start self-start">
234 units
</div>
<p className="text-s text-[#0D1922]">AED 1,138,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
89
</p>
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="p-1 flex justify-center items-center">21</p>
</div>
<p className="text-s text-[#73787C] w-full">Studio Flex</p>
</div>
<p className="text-s text-[#73787C]">1 Bedroom</p>
<p className="text-s text-[#0D1922]">AED 1,048,888</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,668,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
10
</p>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
56
</p>
</div>
<p className="text-s text-[#73787C]">Studio</p>
</div>
<p className="text-s text-[#73787C]">2 Bedroom, Type A</p>
<p className="text-s text-[#0D1922]">AED 1,138,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
89
</p>
</div>
<p className="text-s text-[#73787C]">1 Bedroom</p>
</div>
<p className="text-s text-[#0D1922]">AED 1,668,888</p>
</div>
<div className="flex items-center justify-between gap-8">
<div className="flex gap-2 items-center">
<div className="min-w-6 min-h-6 p-1 rounded-full bg-[#00BED7] text-white text-xs font-semibold">
<p className="h-full w-full flex justify-center items-center">
10
</p>
</div>
<p className="text-s text-[#73787C]">2 Bedroom, Type A</p>
</div>
<p className="text-s text-[#0D1922]">AED 2,408,888</p>
</div>
<p className="text-s text-[#0D1922]">AED 2,408,888</p>
</div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
</div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white rotate-90 absolute top-0 -right-[35px]"></div>
</div>
</div>
</>
);
};
src/components/complexWingPage/SequenceWing.tsx
-7
View File
@@ -95,11 +95,6 @@ const SequenceWing = () => {
setIsWrapperHovered(true);
};
// const handleOnFloorMouseLeave = () => {
// setHoverCurrentFloor(null);
// // setIsWrapperHovered(false);
// };
const handleOnWingWrapperMouseEnter = (
e: React.MouseEvent<SVGSVGElement>
) => {
@@ -168,7 +163,6 @@ const SequenceWing = () => {
</div>
<div
// ref={ref}
className="absolute left-0 transition-[left]"
style={{
width: `${width}px`,
@@ -218,7 +212,6 @@ const SequenceWing = () => {
<img
width={`${width}px`}
height={`${width}px`}
// src="/images/sequenceWing.jpg"
src="/images/sequenceWing.jpeg"
className={`absolute z-10 duration-300 transition-opacity ease-in-out opacity-100`}
alt=""
src/components/complexWingPage/SkygardenDescription.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
const SkygardenDescription = () => {
return (
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px]`}
className={`bg-white rounded-lg p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px]`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
@@ -25,7 +25,7 @@ const SkygardenDescription = () => {
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
</div>
</div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white rotate-90 absolute top-0 -right-[35px]"></div>
<div className="w-0 h-0 border-t-0 border-r-[7px] border-b-[12px] border-l-[7px] border-transparent border-b-white -rotate-90 absolute top-0 -left-[35px]"></div>
</div>
</div>
);