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

upd

Browse Source
This commit is contained in:
zojgame
2024-05-07 18:31:26 +05:00
parent 27bc23930e
commit eb57a7acb8
28 changed files with 1387 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/masterplanPage/WingDescription.tsx → src/components/complexWingPage/FloorDescription.tsx
+30 -5
View File
@@ -1,10 +1,35 @@
const WingDescription = () => {
import { IDesctiptionFloor } from "../../types/descriptionFloor";
interface FloorDescriptionProps {
descriptionFloor: IDesctiptionFloor | null;
}
const FloorDescription = ({ descriptionFloor }: FloorDescriptionProps) => {
return (
<div className="bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px]">
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 w-[364px] absolute ${
descriptionFloor && descriptionFloor.floor !== null
? "opacity-100"
: "opacity-0"
} transition-all duration-300 ease-in-out`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<p className="text-[#0D1922] font-semibold text-[20px]">East Wing</p>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
<div className="flex flex-col">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out ${
descriptionFloor !== null ? "opacity-100" : "opacity-0"
}`}
>
{descriptionFloor?.floor
? `${descriptionFloor.floor} 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>
@@ -58,4 +83,4 @@ const WingDescription = () => {
);
};
export default WingDescription;
export default FloorDescription;
src/components/complexWingPage/FloorSidebar/FloorLayout.tsx
+285
View File
File diff suppressed because one or more lines are too long
src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx
+46
View File
@@ -0,0 +1,46 @@
import FloorLayout from "./FloorLayout";
const FloorSidebar = () => {
return (
<div className="absolute h-[calc(100vh-56px)] right-0 w-1/2 z-20 bg-[#F3F3F2] p-6 flex flex-col top-[56px] ">
<div className="flex justify-between pb-4">
<div className="flex flex-col">
<h1 className="text-subheadline-m font-semibold text-[#0D1922]">
11 floor
</h1>
<p className="text-s text-[#73787C]">East Wing</p>
</div>
<div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
<div className="leading-5">234 units</div>
</div>
</div>
<div className="px-4 py-[18px] bg-white flex gap-6 text-[#73787C] font-semibold text-caption-m rounded-lg mb-2">
<div className="gap-2 flex items-center">
<div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
<p>Studio Flex</p>
</div>
<div className="gap-2 flex items-center">
<div className="rounded-full bg-[#8299AD] w-3 h-3"></div>
<p>Studio</p>
</div>
<div className="gap-2 flex items-center">
<div className="rounded-full bg-[#A19E9E] w-3 h-3"></div>
<p>1 Bedroom</p>
</div>
<div className="gap-2 flex items-center">
<div className="rounded-full bg-[#BFC9D1] w-3 h-3"></div>
<p>1 Bedroom</p>
</div>
<div className="gap-2 flex items-center">
<div className="rounded-full bg-[#B2B8C4] w-3 h-3"></div>
<p>2 Bedroom</p>
</div>
</div>
<div className="px-4 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center h-full items-center">
<FloorLayout />
</div>
</div>
);
};
export default FloorSidebar;
src/components/complexWingPage/SequenceWing.tsx
+166 -76
View File
@@ -1,37 +1,64 @@
import { useEffect, useRef, useState } from "react";
import WingDescription from "../masterplanPage/WingDescription";
import FloorDescription from "./FloorDescription";
import { IDesctiptionFloor } from "../../types/descriptionFloor";
import SkygardenDescription from "./SkygardenDescription";
import FloorLayout from "./FloorSidebar/FloorLayout";
import FloorSidebar from "./FloorSidebar/FloorSidebar";
import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar";
interface IDesctiptionWing {
id: string;
}
const descriptions: IDesctiptionFloor[] = [
{ id: "0", floor: 26, wing: "East Wing" },
{ id: "1", floor: 17, wing: "East Wing" },
{ id: "2", floor: 25, wing: "East Wing" },
{ id: "3", floor: 24, wing: "East Wing" },
{ id: "4", floor: 23, wing: "East Wing" },
{ id: "5", floor: 22, wing: "East Wing" },
{ id: "6", floor: 21, wing: "East Wing" },
{ id: "7", floor: 20, wing: "East Wing" },
{ id: "8", floor: 19, wing: "East Wing" },
{ id: "9", floor: 18, wing: "East Wing" },
{ id: "10", floor: 16, wing: "East Wing" },
{ id: "11", floor: 15, wing: "East Wing" },
{ id: "12", floor: 14, wing: "East Wing" },
{ id: "13", floor: 13, wing: "East Wing" },
{ id: "14", floor: 12, wing: "East Wing" },
{ id: "15", floor: 11, wing: "East Wing" },
{ id: "16", floor: 10, wing: "East Wing" },
{ id: "17", floor: 9, wing: "East Wing" },
{ id: "18", floor: 8, wing: "East Wing" },
{ id: "19", floor: 7, wing: "East Wing" },
{ id: "20", floor: 6, wing: "East Wing" },
{ id: "21", floor: 5, wing: "East Wing" },
{ id: "22", floor: 4, wing: "East Wing" },
{ id: "23", floor: 3, wing: "East Wing" },
{ id: "24", floor: 2, wing: "East Wing" },
{ id: "25", floor: 1, wing: "East Wing" },
const leftWingDescriptions: IDesctiptionWing[] = [
{ id: "0" },
{ id: "1" },
{ id: "2" },
{ id: "3" },
{ id: "4" },
{ id: "5" },
{ id: "6" },
{ id: "7" },
{ id: "8" },
{ id: "9" },
{ id: "10" },
{ id: "11" },
{ id: "12" },
{ id: "13" },
{ id: "14" },
{ id: "15" },
{ id: "16" },
{ id: "17" },
{ id: "18" },
{ id: "19" },
{ id: "20" },
{ id: "21" },
{ id: "22" },
{ id: "23" },
{ id: "24" },
{ id: "25" },
{ id: "50", floor: 26, wing: "West Wing" },
{ id: "26", floor: 25, wing: "West Wing" },
{ id: "27", floor: 24, wing: "West Wing" },
{ id: "28", floor: 23, wing: "West Wing" },
{ id: "29", floor: 22, wing: "West Wing" },
{ id: "30", floor: 21, wing: "West Wing" },
{ id: "31", floor: 20, wing: "West Wing" },
{ id: "32", floor: 19, wing: "West Wing" },
{ id: "33", floor: 16, wing: "West Wing" },
{ id: "34", floor: 15, wing: "West Wing" },
{ id: "35", floor: 14, wing: "West Wing" },
{ id: "36", floor: 13, wing: "West Wing" },
{ id: "37", floor: 12, wing: "West Wing" },
{ id: "38", floor: 11, wing: "West Wing" },
{ id: "39", floor: 10, wing: "West Wing" },
{ id: "40", floor: 9, wing: "West Wing" },
{ id: "41", floor: 8, wing: "West Wing" },
{ id: "42", floor: 7, wing: "West Wing" },
{ id: "43", floor: 6, wing: "West Wing" },
{ id: "44", floor: 5, wing: "West Wing" },
{ id: "45", floor: 4, wing: "West Wing" },
{ id: "46", floor: 3, wing: "West Wing" },
{ id: "47", floor: 2, wing: "West Wing" },
{ id: "48", floor: 1, wing: "West Wing" },
{ id: "49", floor: 17, wing: "West Wing" },
];
const SequenceWing = () => {
@@ -41,12 +68,13 @@ const SequenceWing = () => {
const descriptionRef = useRef(null);
const [scalePercent, setSetScalePercent] = useState(100);
const [tooltipPosX, setTooltipPosX] = useState(0);
const [tooltipPosY, setTooltipPosY] = useState(0);
const [currentFloorHover, setCurrentFloorHover] = useState<string | null>(
null
);
const [mousePos, setMousePos] = useState<[number, number]>([0, 0]);
const [currentFloor, setCurrentFloor] = useState<null | IDesctiptionFloor>(
null
);
function handleResize() {
setWidth(window.innerWidth);
@@ -59,30 +87,25 @@ const SequenceWing = () => {
) => {
const id = e.currentTarget.dataset.id;
if (!id) return;
const _currentFloor = descriptions.find((desc) => desc.id === id);
if (!_currentFloor) return;
setCurrentFloor(_currentFloor);
setCurrentFloorHover(id);
};
const handleOnLeftFloorMouseLeave = () => {
setCurrentFloorHover(null);
setCurrentFloor(null);
};
const handleOnFloorClick = () => {};
function handleMouseMove(e: MouseEvent) {
setMousePos([e.clientX, e.clientY]);
const top = window.innerWidth / 2 - window.innerHeight / 2;
setMousePos([e.clientX - 384, e.clientY + Math.abs(top) - 20]);
}
useEffect(() => {
if (!descriptionRef || !descriptionRef.current) return;
const descriptionElement = descriptionRef.current as HTMLDivElement;
const descWidth = descriptionElement.clientWidth + 364 + 10;
const newX = (735 / 100) * scalePercent - descWidth - 20;
const newY = (720 / 100) * scalePercent + 20;
setTooltipPosX(newX);
setTooltipPosY(newY);
}, [scalePercent]);
useEffect(() => {
handleResize();
window.addEventListener("resize", handleResize);
@@ -101,31 +124,26 @@ const SequenceWing = () => {
return (
<div className="absolute left-0 overflow-hidden h-screen w-screen">
{/* <FloorSidebar /> */}
<SkygardenSidebar />
<div
className="absolute left-0"
style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
className="absolute left-0 transition-[left]"
style={{
width: `${width}px`,
height: `${width}px`,
top: `-${top}px`,
// left: "-25%",
}}
>
<div
className={`absolute left-0 top-0 z-40`}
className={`absolute z-40 top-0 left-0`}
style={{
top: mousePos[1] - 200,
top: mousePos[1],
left: mousePos[0],
}}
>
<WingDescription />
{/* {leftWingDescriptions.map((desc, index) => (
<div
className={`absolute left-0 h-screen duration-300 ease-in-out transition-opacity ${
currentFloorHover === desc.id ? "opacity-100" : "opacity-0"
} `}
key={desc.id}
style={{
top: `${7 + index * 15}px`,
}}
>
<WingDescription />
</div>
))} */}
<SkygardenDescription />
<FloorDescription descriptionFloor={currentFloor} />
</div>
<img
width={`${width}px`}
@@ -290,7 +308,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"16"}
data-id={"17"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -298,7 +316,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"17"}
data-id={"18"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -306,7 +324,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"18"}
data-id={"19"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -314,7 +332,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"19"}
data-id={"20"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -322,7 +340,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"20"}
data-id={"21"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -330,7 +348,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"21"}
data-id={"22"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -338,7 +356,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"22"}
data-id={"23"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -346,7 +364,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"23"}
data-id={"24"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -354,7 +372,7 @@ const SequenceWing = () => {
fill="#00BED7"
/>
<path
data-id={"24"}
data-id={"25"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
@@ -373,126 +391,201 @@ const SequenceWing = () => {
y={738}
>
<path
data-id={"50"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.13 20.5944C502.267 20.6425 503.215 19.734 503.215 18.5962V5.703C503.215 4.63551 502.376 3.75618 501.31 3.70527L432.953 0.442034C432.792 0.43432 432.63 0.44624 432.471 0.477532L418.059 3.31905L293.346 14.6605H263.827C262.722 14.6605 261.827 15.556 261.827 16.6605V28.2808C261.827 29.3854 262.722 30.2808 263.827 30.2808H293.346L418.059 20.2586L430.902 17.6788C431.059 17.6472 431.22 17.6347 431.38 17.6415L501.13 20.5944Z"
fill="#00BED7"
/>
<path
data-id={"26"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.154 39.531C502.282 39.5655 503.215 38.6605 503.215 37.532V25.6074C503.215 24.5427 502.381 23.6647 501.317 23.6101L431.869 20.0411C431.716 20.0333 431.563 20.0429 431.413 20.0699L418.091 22.4616L293.346 32.2715H263.827C262.722 32.2715 261.827 33.1669 261.827 34.2715V45.8917C261.827 46.9963 262.722 47.8917 263.827 47.8917H293.346L418.091 39.6656L431.445 37.4381C431.574 37.4167 431.705 37.4078 431.835 37.4118L501.154 39.531Z"
fill="#00BED7"
/>
<path
data-id={"27"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.166 58.5776C502.29 58.6049 503.215 57.7018 503.215 56.5782V44.6527C503.215 43.5832 502.373 42.7029 501.305 42.6547L431.862 39.5228C431.714 39.5161 431.565 39.5259 431.419 39.5522L418.091 41.945L293.346 49.8544H263.827C262.722 49.8544 261.827 50.7498 261.827 51.8544V63.4746C261.827 64.5791 262.722 65.4746 263.827 65.4746H293.346L418.091 58.6989L431.483 56.9101C431.587 56.8962 431.692 56.8905 431.796 56.893L501.166 58.5776Z"
fill="#00BED7"
/>
<path
data-id={"28"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.179 77.594C502.297 77.6141 503.215 76.7129 503.215 75.5943V63.668C503.215 62.5936 502.366 61.7112 501.292 61.6695L431.823 58.9732C431.701 58.9685 431.578 58.975 431.456 58.9928L418.091 60.9483L293.346 67.5073H263.827C262.722 67.5073 261.827 68.4028 261.827 69.5073V81.1276C261.827 82.2321 262.722 83.1276 263.827 83.1276H293.346L418.091 77.7022L431.639 76.3426L501.179 77.594Z"
fill="#00BED7"
/>
<path
data-id={"29"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.191 96.6575C502.305 96.6706 503.215 95.7714 503.215 94.6577V82.7308C503.215 81.6515 502.359 80.7669 501.28 80.7318L431.784 78.4715C431.687 78.4684 431.591 78.4723 431.494 78.4831L418.091 79.9989L293.346 85.2077H263.827C262.722 85.2077 261.827 86.1031 261.827 87.2077V98.8279C261.827 99.9325 262.722 100.828 263.827 100.828H293.346L418.091 96.7528L431.639 95.8433L501.191 96.6575Z"
fill="#00BED7"
/>
<path
data-id={"30"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.204 115.766C502.313 115.772 503.215 114.875 503.215 113.766V101.839C503.215 100.754 502.351 99.8677 501.267 99.8392L431.639 98.0125L418.091 99.0945L293.346 102.953H263.827C262.722 102.953 261.827 103.848 261.827 104.953V116.573C261.827 117.678 262.722 118.573 263.827 118.573H293.346L418.091 115.848L431.639 115.389L501.204 115.766Z"
fill="#00BED7"
/>
<path
data-id={"31"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.217 134.863C502.32 134.862 503.215 133.967 503.215 132.863V120.935C503.215 119.846 502.344 118.957 501.255 118.936L431.639 117.547L418.091 118.179L293.346 120.687H263.827C262.722 120.687 261.827 121.582 261.827 122.687V134.307C261.827 135.412 262.722 136.307 263.827 136.307H293.346L418.091 134.933L431.639 134.923L501.217 134.863Z"
fill="#00BED7"
/>
<path
data-id={"32"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.229 154.048C502.328 154.04 503.215 153.147 503.215 152.048V139.634C503.215 138.535 502.328 137.642 501.228 137.634L431.639 137.17L418.091 137.352L293.346 138.51H263.694C262.59 138.51 261.694 139.405 261.694 140.51V152.13C261.694 153.234 262.59 154.13 263.694 154.13H293.346L418.091 154.106L431.639 154.546L501.229 154.048Z"
fill="#00BED7"
/>
<path
data-id={"33"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.146 267.629C502.221 267.588 503.07 266.706 503.07 265.631V252.795C503.07 251.661 502.129 250.754 500.997 250.796L430.66 253.387C430.55 253.391 430.439 253.386 430.33 253.371L417.946 251.774L293.202 244.256H263.682C262.578 244.256 261.682 245.152 261.682 246.256V257.877C261.682 258.981 262.578 259.877 263.682 259.877L293.202 259.877L417.946 268.528L430.316 270.294C430.435 270.311 430.555 270.317 430.675 270.312L501.146 267.629Z"
fill="#00BED7"
/>
<path
data-id={"34"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.144 287.089C502.219 287.049 503.07 286.166 503.07 285.09V272.254C503.07 271.121 502.131 270.215 500.999 270.255L430.69 272.748C430.56 272.752 430.43 272.744 430.301 272.724L417.946 270.736L293.202 261.868H263.682C262.578 261.868 261.682 262.763 261.682 263.868V275.488C261.682 276.593 262.578 277.488 263.682 277.488L293.202 277.488L417.946 287.49L430.287 289.645C430.425 289.669 430.565 289.679 430.705 289.673L501.144 287.089Z"
fill="#00BED7"
/>
<path
data-id={"35"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.17 305.71C502.234 305.657 503.07 304.778 503.07 303.712V291.364C503.07 290.226 502.123 289.318 500.987 289.365L430.731 292.292C430.574 292.299 430.416 292.287 430.262 292.256L417.946 289.833L293.202 279.615H263.682C262.578 279.615 261.682 280.51 261.682 281.615V293.235C261.682 294.34 262.578 295.235 263.682 295.235L293.202 295.235L417.946 306.587L430.241 309.175C430.409 309.21 430.581 309.224 430.753 309.215L501.17 305.71Z"
fill="#00BED7"
/>
<path
data-id={"36"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.182 324.863C502.242 324.803 503.07 323.927 503.07 322.866V310.518C503.07 309.376 502.116 308.466 500.975 308.521L430.776 311.88C430.589 311.889 430.402 311.872 430.22 311.829L417.946 308.925L293.202 297.406H263.682C262.578 297.406 261.682 298.302 261.682 299.406V311.026C261.682 312.131 262.578 313.026 263.682 313.026L293.202 313.026L417.802 325.664C417.898 325.674 417.993 325.691 418.086 325.714L430.2 328.747C430.395 328.795 430.597 328.815 430.797 328.803L501.182 324.863Z"
fill="#00BED7"
/>
<path
data-id={"37"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.194 343.893C502.249 343.828 503.07 342.954 503.07 341.897V329.551C503.07 328.404 502.108 327.492 500.962 327.554L430.778 331.348C430.59 331.358 430.401 331.342 430.217 331.299L417.946 328.445L293.202 315.312H263.682C262.578 315.312 261.682 316.208 261.682 317.312V328.933C261.682 330.037 262.578 330.933 263.682 330.933L293.202 330.933L417.946 345.199L430.197 348.217C430.394 348.265 430.597 348.284 430.8 348.271L501.194 343.893Z"
fill="#00BED7"
/>
<path
data-id={"38"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.207 362.866C502.256 362.794 503.07 361.922 503.07 360.871V348.526C503.07 347.374 502.1 346.461 500.95 346.53L430.819 350.756C430.604 350.769 430.388 350.747 430.18 350.691L418.089 347.445C417.994 347.42 417.897 347.401 417.8 347.39L293.202 332.989H263.682C262.578 332.989 261.682 333.884 261.682 334.989V346.609C261.682 347.714 262.578 348.609 263.682 348.609L293.202 348.609L417.796 364.142C417.896 364.154 417.995 364.174 418.092 364.202L430.161 367.608C430.381 367.67 430.611 367.694 430.84 367.679L501.207 362.866Z"
fill="#00BED7"
/>
<path
data-id={"39"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.218 382.126C502.262 382.049 503.07 381.179 503.07 380.131V367.303C503.07 366.141 502.084 365.224 500.925 365.308L430.869 370.399C430.622 370.417 430.373 370.389 430.135 370.316L418.116 366.61C418.003 366.575 417.887 366.55 417.769 366.536L293.202 351.339L263.714 350.871C262.597 350.853 261.682 351.754 261.682 352.871V364.459C261.682 365.564 262.578 366.459 263.682 366.459L293.202 366.459L417.77 383.287C417.887 383.303 418.003 383.329 418.115 383.366L430.123 387.233C430.368 387.312 430.627 387.343 430.884 387.324L501.218 382.126Z"
fill="#00BED7"
/>
<path
data-id={"40"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.23 401.397C502.269 401.314 503.07 400.446 503.07 399.404V386.577C503.07 385.411 502.076 384.492 500.913 384.583L430.905 390.105C430.634 390.126 430.362 390.092 430.104 390.004L418.128 385.93C418.007 385.889 417.882 385.859 417.755 385.842L293.202 368.799L263.714 368.332C262.597 368.314 261.682 369.214 261.682 370.331V381.948C261.682 383.041 262.56 383.932 263.654 383.948L293.202 384.37L417.753 402.594C417.881 402.612 418.008 402.644 418.131 402.687L430.092 406.921C430.357 407.015 430.639 407.052 430.919 407.03L501.23 401.397Z"
fill="#00BED7"
/>
<path
data-id={"41"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.23 420.559C502.269 420.475 503.07 419.608 503.07 418.565V405.739C503.07 404.572 502.076 403.653 500.913 403.745L430.905 409.266C430.634 409.287 430.362 409.253 430.104 409.166L418.115 405.087C418.003 405.048 417.887 405.02 417.77 405.003L293.202 386.16L263.714 385.692C262.597 385.675 261.682 386.575 261.682 387.692V399.34C261.682 400.421 262.541 401.306 263.622 401.339L293.202 402.23L417.763 421.754C417.885 421.774 418.005 421.804 418.121 421.845L430.092 426.083C430.357 426.176 430.639 426.213 430.919 426.191L501.23 420.559Z"
fill="#00BED7"
/>
<path
data-id={"42"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.229 439.92C502.269 439.837 503.07 438.969 503.07 437.926V425.099C503.07 423.933 502.077 423.014 500.914 423.105L430.938 428.576C430.646 428.599 430.352 428.557 430.078 428.454L418.137 423.963C418.01 423.915 417.879 423.881 417.745 423.86L293.202 404.222L263.714 403.754C262.597 403.736 261.682 404.637 261.682 405.754V417.402C261.682 418.483 262.541 419.368 263.622 419.401L293.202 420.292L417.738 440.611C417.876 440.634 418.012 440.671 418.143 440.722L430.067 445.371C430.348 445.48 430.651 445.525 430.952 445.501L501.229 439.92Z"
fill="#00BED7"
/>
<path
data-id={"43"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.253 458.737C502.283 458.642 503.07 457.779 503.07 456.745V443.922C503.07 442.747 502.061 441.825 500.89 441.931L430.947 448.266C430.649 448.293 430.349 448.253 430.069 448.149L418.117 443.701C418.003 443.659 417.886 443.627 417.767 443.606L293.358 421.696C293.254 421.677 293.149 421.667 293.043 421.665L263.714 421.2C262.597 421.182 261.682 422.083 261.682 423.2V434.848C261.682 435.929 262.541 436.814 263.622 436.847L293.052 437.734C293.152 437.737 293.251 437.747 293.349 437.765L417.76 460.358C417.884 460.38 418.005 460.415 418.123 460.46L430.058 465.065C430.345 465.176 430.654 465.219 430.961 465.191L501.253 458.737Z"
fill="#00BED7"
/>
<path
data-id={"44"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.265 477.755C502.29 477.655 503.07 476.794 503.07 475.765V462.945C503.07 461.764 502.053 460.84 500.878 460.954L430.986 467.719C430.663 467.75 430.338 467.702 430.037 467.58L418.134 462.723C418.009 462.672 417.879 462.634 417.746 462.609L293.368 439.358C293.257 439.337 293.145 439.326 293.032 439.324L263.714 438.859C262.597 438.841 261.682 439.741 261.682 440.858V452.506C261.682 453.587 262.541 454.473 263.622 454.505L293.041 455.392C293.148 455.395 293.254 455.407 293.359 455.427L417.74 479.361C417.877 479.387 418.011 479.428 418.139 479.482L430.027 484.495C430.334 484.625 430.668 484.676 430.999 484.643L501.265 477.755Z"
fill="#00BED7"
/>
<path
data-id={"45"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.291 496.547C502.304 496.435 503.07 495.579 503.07 494.56V482.23C503.07 481.044 502.045 480.119 500.865 480.24L431.024 487.433C430.677 487.469 430.327 487.413 430.008 487.272L418.151 482.009C418.015 481.948 417.872 481.903 417.726 481.874L293.346 457.376C293.25 457.357 293.153 457.345 293.055 457.34L263.777 455.947C262.637 455.893 261.682 456.803 261.682 457.945V469.587C261.682 470.644 262.504 471.518 263.559 471.583L293.202 473.417L417.72 498.626C417.87 498.656 418.017 498.704 418.156 498.768L429.991 504.184C430.32 504.334 430.684 504.393 431.044 504.353L501.291 496.547Z"
fill="#00BED7"
/>
<path
data-id={"46"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.303 515.73C502.311 515.612 503.07 514.759 503.07 513.744V500.932C503.07 499.736 502.028 498.808 500.84 498.946L431.072 507.044C430.695 507.088 430.313 507.023 429.971 506.858L418.169 501.149C418.021 501.078 417.865 501.025 417.704 500.991L293.356 475.202C293.253 475.181 293.149 475.168 293.045 475.163L263.777 473.77C262.637 473.716 261.682 474.626 261.682 475.768V487.411C261.682 488.467 262.504 489.341 263.559 489.407L293.054 491.232C293.152 491.238 293.25 491.251 293.347 491.272L417.699 517.743C417.863 517.778 418.022 517.833 418.173 517.908L429.962 523.773C430.309 523.945 430.7 524.013 431.085 523.968L501.303 515.73Z"
fill="#00BED7"
/>
<path
data-id={"47"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.302 534.992C502.31 534.875 503.07 534.021 503.07 533.006V520.678C503.07 519.488 502.038 518.561 500.855 518.69L431.096 526.259C430.704 526.301 430.308 526.227 429.958 526.045L418.182 519.927C418.026 519.846 417.859 519.785 417.686 519.748L293.365 492.668C293.256 492.645 293.146 492.63 293.035 492.625L263.777 491.233C262.637 491.178 261.682 492.088 261.682 493.23V504.873C261.682 505.93 262.504 506.804 263.559 506.869L293.044 508.693C293.149 508.7 293.253 508.715 293.356 508.738L417.681 536.499C417.857 536.538 418.027 536.601 418.186 536.686L429.943 542.956C430.302 543.148 430.711 543.225 431.115 543.178L501.302 534.992Z"
fill="#00BED7"
/>
<path
data-id={"48"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.328 553.645C502.324 553.516 503.07 552.667 503.07 551.662V539.341C503.07 538.14 502.02 537.21 500.829 537.355L431.136 545.829C430.719 545.88 430.296 545.798 429.929 545.595L418.189 539.121C418.028 539.032 417.855 538.966 417.676 538.925L293.394 510.01C293.266 509.981 293.136 509.963 293.004 509.959L263.746 509.031C262.617 508.995 261.682 509.901 261.682 511.03V522.676C261.682 523.745 262.523 524.624 263.59 524.674L293.013 526.027C293.139 526.033 293.263 526.051 293.385 526.08L417.671 555.676C417.854 555.719 418.029 555.788 418.192 555.88L429.914 562.506C430.291 562.719 430.726 562.804 431.155 562.748L501.328 553.645Z"
fill="#00BED7"
/>
<path
data-id={"49"}
onMouseEnter={handleOnLeftFloorMouseEnter}
onMouseLeave={handleOnLeftFloorMouseLeave}
className="fill-[#00BED7] cursor-pointer opacity-50 hover:opacity-70 transition-opacity duration-300 ease-in-out "
d="M501.279 248.587C502.358 248.552 503.215 247.668 503.215 246.588V231.533C503.215 230.411 502.292 229.508 501.171 229.533L418.224 231.361L403.255 229.795L293.346 224.549H263.827C262.722 224.549 261.827 225.444 261.827 226.549V240.391C261.827 241.506 262.74 242.406 263.855 242.39L293.346 241.969L418.224 249.679L430.639 250.838L501.279 248.587Z"
fill="#00BED7"
@@ -505,6 +598,3 @@ const SequenceWing = () => {
};
export default SequenceWing;
function handleMouseMoывапвыавыve(this: Window, ev: MouseEvent) {
throw new Error("Function not implemented.");
}
src/components/complexWingPage/SkygardenDescription.tsx
+34
View File
@@ -0,0 +1,34 @@
const SkygardenDescription = () => {
return (
<div
className={`bg-white rounded-lg p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute`}
>
<div className="relative">
<div className="flex justify-between border-b pb-4">
<p
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out `}
>
Sky Garden
</p>
<div className="py-[3px] px-2 rounded-full bg-[#00BED7] text-white">
17 amenties
</div>
</div>
<div className="flex flex-col gap-4 pt-4">
<div className="flex items-center justify-between gap-[178px]">
<p className="text-s text-[#73787C] w-full">Indoor</p>
<p className="text-s text-[#0D1922] text-nowrap">3 amenties</p>
</div>
<div className="flex items-center justify-between">
<p className="text-s text-[#73787C]">Outdoor </p>
<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>
</div>
);
};
export default SkygardenDescription;
src/components/complexWingPage/SkygardenSidebar/ActivityCard.tsx
+20
View File
@@ -0,0 +1,20 @@
interface ActivityCardProps {
icon?: React.ReactNode;
title: string;
}
const ActivityCard = ({ icon, title }: ActivityCardProps) => {
return (
<div className="bg-white rounded-2xl flex flex-col gap-9 p-3">
<div className="flex gap-2 items-center">
<div className="w-3 h-3 bg-[#E2E2DC] rounded-full"></div>
<p className="text-m text-[#0D1922]">{title}</p>
</div>
<div className="w-14 h-14 rounded-lg bg-[#F3F3F2] self-end text-[#00BED7]">
{icon}
</div>
</div>
);
};
export default ActivityCard;
src/components/complexWingPage/SkygardenSidebar/SkygardenLayout.tsx
+95
View File
File diff suppressed because one or more lines are too long
src/components/complexWingPage/SkygardenSidebar/SkygardenSidebar.tsx
+100
View File
@@ -0,0 +1,100 @@
import AmphitheatreIcon from "../../icons/activities/AmphitheatreIcon";
import BoulderingWallIcon from "../../icons/activities/BoulderingWallIcon";
import ChangingRoomsIcon from "../../icons/activities/ChangingRoomsIcon";
import ChessTablesIcon from "../../icons/activities/ChessTablesIcon";
import ClimbingRoomIcon from "../../icons/activities/ClimbingRoomIcon";
import CommunalDiningTablesIcon from "../../icons/activities/CommunalDiningTablesIcon";
import IndoorLapPoolIcon from "../../icons/activities/IndoorLapPoolIcon";
import LushLandscapeIcon from "../../icons/activities/LushLandscapeIcon";
import MultiPurposeCourtIcon from "../../icons/activities/MultiPurposeCourtIcon";
import OutdoorCinemaIcon from "../../icons/activities/OutdoorCinemaIcon";
import OutdoorCoworkingSpaceIcon from "../../icons/activities/OutdoorCoworkingSpaceIcon";
import PadelPongIcon from "../../icons/activities/PadelPongIcon";
import PingPongInATableIcon from "../../icons/activities/PingPongInATableIcon";
import RunningWheelIcon from "../../icons/activities/RunningWheelIcon";
import SunLoungingDeckIcon from "../../icons/activities/SunLoungingDeckIcon";
import SuspendedLoungingNetsIcon from "../../icons/activities/SuspendedLoungingNetsIcon";
import WellnessFeaturesIcon from "../../icons/activities/WellnessFeaturesIcon";
import ActivityCard from "./ActivityCard";
import SkygardenLayout from "./SkygardenLayout";
import ZoneSlider from "./ZoneSlider";
const SkygardenSidebar = () => {
return (
<div className="absolute h-[calc(100vh-56px)] right-0 w-1/2 z-30 bg-[#F3F3F2] py-6 flex flex-col top-[56px] ">
<div className="flex justify-between pb-2 border-b border-b-[#E2E2DC] mx-6">
<div className="flex flex-col ">
<h1 className="text-subheadline-m font-semibold text-[#0D1922]">
Sky Garden
</h1>
<p className="text-s text-[#73787C]">22-23 floor</p>
</div>
<div className="bg-[#00BED7] text-white text-s px-2 py-[3px] rounded-3xl flex h-fit">
<div className="leading-5">17 amenties</div>
</div>
</div>
<div className="overflow-y-scroll py-6">
<div className="px-4 bg-white flex gap-6 font-semibold text-caption-m rounded-lg justify-center items-center h-[648px] mb-4 pb-4 mx-6">
<SkygardenLayout />
</div>
<div className="grid grid-cols-3 gap-4 border-t pt-4 pb-4 mx-6">
<div className="font-semibold text-subheadline-s">
Indoor Amenties
</div>
<ActivityCard
title={"Indoor Lap Pool"}
icon={<IndoorLapPoolIcon />}
/>
<ActivityCard
title={"Wellness Features"}
icon={<WellnessFeaturesIcon />}
/>
<ActivityCard title={"Changing Rooms"} icon={<ChangingRoomsIcon />} />
</div>
<div className="grid grid-cols-3 gap-4 border-t py-4 border-b mb-4 mx-6">
<div className="font-semibold text-subheadline-s">
Outdoor Amenties
</div>
<ActivityCard title={"Padel Pong"} icon={<PadelPongIcon />} />
<ActivityCard
title={"Sun Lounging Deck"}
icon={<SunLoungingDeckIcon />}
/>
<ActivityCard title={"Outdoor Cinema"} icon={<OutdoorCinemaIcon />} />
<ActivityCard
title={"Bouldering Wall"}
icon={<BoulderingWallIcon />}
/>
<ActivityCard
title={"Ping Pong in a Tube"}
icon={<PingPongInATableIcon />}
/>
<ActivityCard title={"Amphitheatre"} icon={<AmphitheatreIcon />} />
<ActivityCard
title={"Communal Dining Tables"}
icon={<CommunalDiningTablesIcon />}
/>
<ActivityCard
title={"Suspended Lounging Nets "}
icon={<SuspendedLoungingNetsIcon />}
/>
<ActivityCard title={"Lush Landscape"} icon={<LushLandscapeIcon />} />
<ActivityCard title={"Running Wheel"} icon={<RunningWheelIcon />} />
<ActivityCard title={"Chess Tables"} icon={<ChessTablesIcon />} />
<ActivityCard title={"Climbing Wall"} icon={<ClimbingRoomIcon />} />
<ActivityCard
title={"Outdoor Coworking Space"}
icon={<OutdoorCoworkingSpaceIcon />}
/>
<ActivityCard
title={"Multi-purpose Court"}
icon={<MultiPurposeCourtIcon />}
/>
</div>
<ZoneSlider />
</div>
</div>
);
};
export default SkygardenSidebar;
src/components/complexWingPage/SkygardenSidebar/ZoneSlider.tsx
+110
View File
@@ -0,0 +1,110 @@
/* eslint-disable react-hooks/exhaustive-deps */
import { useSwipeable } from "react-swipeable";
import { Image } from "../../../types/image";
import { useLayoutEffect, useRef, useState } from "react";
import Button from "../../Button";
import LeftArrowSliderIcon from "../../icons/LeftArrowSliderIcon";
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
import { isMobile } from "react-device-detect";
const images: Image[] = [
{ id: "1", src: "/images/company/slider/1.png" },
{ id: "2", src: "/images/company/slider/2.png" },
{ id: "3", src: "/images/company/slider/3.png" },
];
const getGapOffset = (screenWidth: number) => {
if (screenWidth > 1600) return 16;
if (screenWidth > 1280) return 24;
if (screenWidth > 640) return 16;
return 16;
};
const ZoneSlider = () => {
const [selectedImageIndex, setSelectedImageIndex] = useState(-1);
const [rightImageOffset, setRightImageOffset] = useState("");
const [imageWidth, setImageWidth] = useState(0);
const imageRef = useRef<HTMLImageElement>(null);
useLayoutEffect(() => {
if (!imageRef.current?.src) return;
const width = imageRef.current.width;
setImageWidth(width);
}, [imageRef.current, window.innerWidth]);
useLayoutEffect(() => {
const screenWidth = window.innerWidth;
const gapOffset = getGapOffset(screenWidth);
const _rightImageOffset = `${
-24 + (selectedImageIndex + 1) * (imageWidth + gapOffset)
}px`;
setRightImageOffset(_rightImageOffset);
}, [imageWidth, selectedImageIndex, window.innerWidth]);
const handlers = useSwipeable({
onSwipedLeft: next,
onSwipedRight: prev,
trackMouse: true,
});
function next() {
const lastIndex = isMobile ? images.length - 2 : images.length - 3;
if (selectedImageIndex === lastIndex + 1) return;
setSelectedImageIndex((prev) => prev + 1);
}
function prev() {
if (selectedImageIndex === -1) return;
setSelectedImageIndex((prev) => prev - 1);
}
return (
<div className="flex flex-col gap-6 " {...handlers}>
<div className="relative col-span-full overflow-x-hidden flex flex-col h-[372px] ">
<div
className={`flex gap-4 w-full absolute h-full transition-all duration-300 ease-in-out select-none xl:px-0 px-4`}
style={{
right: `${rightImageOffset}`,
}}
>
{images.map((image) => (
<img
ref={imageRef}
src={image.src}
alt=""
key={image.id}
className="rounded-2xl sm:aspect-[6.6/3.7] object-cover pointer-events-none select-none"
/>
))}
</div>
<Button
onClick={prev}
icon={<LeftArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] left-8 hidden sm:block"
/>
<Button
onClick={next}
icon={<RightArrowSliderIcon />}
className="absolute text-[#73787C] top-[calc(50%-22px)] right-8 hidden sm:block"
/>
</div>
<div className="self-center gap-1 sm:hidden flex">
{images.map((image, index) => (
<div
key={image.id}
className={`transition-all duration-300 ease-in-out rounded-full h-2 ${
index - 1 === selectedImageIndex
? "w-6 bg-[#0D1922]"
: "w-2 bg-[#0D192266]"
}`}
></div>
))}
</div>
</div>
);
};
export default ZoneSlider;
src/components/icons/activities/AmphitheatreIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const AmphitheatreIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<rect width="56" height="56" fill="#F3F3F2" rx="8"></rect>
<path
stroke="currentColor"
strokeLinejoin="round"
strokeWidth="1.4"
d="M36.253 41.565v-1.297c0-.719.527-1.297 1.175-1.297h2.36c.647 0 1.184.588 1.184 1.297v1.297m-11.798 0v-1.297c0-.719.527-1.297 1.175-1.297h2.36c.648 0 1.184.588 1.184 1.297v1.297m-11.797 0v-1.297c0-.719.527-1.297 1.175-1.297h2.36c.647 0 1.184.588 1.184 1.297v1.297m-11.797 0v-1.297c0-.719.526-1.297 1.174-1.297h2.36c.648 0 1.174.588 1.174 1.297v1.297m12.983-4.559V35.71c0-.72.526-1.297 1.184-1.297h2.36c.648 0 1.175.577 1.175 1.297v1.296m-11.798 0V35.71c0-.72.527-1.297 1.185-1.297h2.36c.648 0 1.174.577 1.174 1.297v1.296m-11.797 0V35.71c0-.72.526-1.297 1.174-1.297h2.36c.648 0 1.175.577 1.175 1.297v1.296m17.124-5.855h-24.78v-16.27h24.78v16.27z"
></path>
</svg>
);
};
export default AmphitheatreIcon;
src/components/icons/activities/BoulderingWallIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const BoulderingWallIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<rect width="56" height="56" fill="#F3F3F2" rx="8"></rect>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M32.35 44.463l5.543-2.12.308.207-3.497 3.707-2.354-1.794zm4.937-35.047L23.649 5.233l-4.151 4.996 5.611 7.275 9.933-1.418 2.245-6.68v.01zm-1.867 12.38l3.645 8.672-2.682 6.443-9.307 3.558-8.254-6.175 6.655-11.071 9.933-1.427h.01zm1.946 30.755h15.297v-5.6l-9.138-2.22-6.1 6.462-.059 1.368v-.01zm-21.98 0H32.35l.05-1.19-11.095-8.384-6.237 6.61.318 2.954v.01zM1.063 50.41v2.14h9.277l-.15-1.388-9.127-.753zm0-32.322v8.97l4.946 6.363 7.896-.981 7.033-11.716-5.682-7.414L1.063 18.09zm51.61-1.418v10.645l-9.258.258-3.804-9.06 2.454-7.294 9.138 4.212 1.48 1.24h-.01zM39.343 3.033h11.343v6.512l-1.152 1.873-8.89-4.103-1.301-4.282zM29.271 1.715h6.745l.695 2.28-7.44-2.28zM12.932 1.05h7.29L16.35 5.709l-3.427-4.658h.01zm30.523 32.212l-2.016 4.847 1.43.971 9.803 2.656v-8.732c-3.069.08-6.148.169-9.217.258zM4.966 39.32l9.754-1.259 2.265 1.695-5.483 5.818-10.45-.822v-9.04l3.904 3.618.01-.01zM1.063 1.061h5.333l5.473 7.453-10.806 3.42V1.06z"
></path>
</svg>
);
};
export default BoulderingWallIcon;
src/components/icons/activities/ChangingRoomsIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
function ChangingRoomsIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.87"
d="M36.523 21.872h3.297m-3.297-2.831h3.297m-13.38 2.83h3.289m-3.288-2.83h3.288m-13.38 2.83h3.298m-3.298-2.83h3.298m13.39 21.683h9.902V15.276h-9.903m0 25.448V15.276m0 25.448h-9.903V15.276h9.903M22.955 40.724h-9.903V15.276h9.903v25.448z"
></path>
</svg>
);
}
export default ChangingRoomsIcon;
src/components/icons/activities/ChessTablesIcon.tsx
+26
View File
@@ -0,0 +1,26 @@
const ChessTablesIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
d="M38.225 44.781H17.764v-3.729c0-1.236.95-2.235 2.114-2.235h3.524c.389 0 .705.33.705.741 0 .412-.316.742-.704.742h-3.525c-.388 0-.705.33-.705.742v2.235h17.642v-2.235c0-.412-.316-.742-.705-.742h-9.173c-.388 0-.705-.33-.705-.742s.317-.741.705-.741h9.173c1.165 0 2.115.999 2.115 2.235v3.73zM32.637 36.86c-1.4-3.699-.194-5.574 1.073-6.985l-3.034-3.204a.77.77 0 01-.204-.525v-2.988h1.41v2.679l3.32 3.512a.77.77 0 010 1.051c-1.39 1.474-2.493 2.638-1.257 5.903l-1.308.556z"
></path>
<path
fill="currentColor"
d="M22.709 37.323a.695.695 0 01-.501-.216.77.77 0 010-1.051c.92-.979 1.348-2.4 1.124-3.812-.256-1.638-1.338-3.039-3.065-3.945a.752.752 0 01-.388-.67v-6.717c0-3.718 1.747-5.995 3.207-7.252 1.798-1.556 4.23-2.441 6.671-2.441 2.053 0 4.873 1.122 6.14 2.451a.77.77 0 01.204.526.752.752 0 01-.205.525l-1.614 1.71 3.74 3.946a.77.77 0 01.203.525v2.205a.77.77 0 01-.204.525l-2.114 2.266a.678.678 0 01-.5.217.719.719 0 01-.501-.217l-1.91-2.019h-2.534c-1.737 0-3.524-1.112-3.524-2.987v-.742c0-.412.316-.742.704-.742.389 0 .705.33.705.742v.742c0 .917 1.104 1.494 2.115 1.494h2.82c.183 0 .367.082.5.216l1.614 1.71 1.42-1.514V21.2l-4.025-4.255a.77.77 0 010-1.05l1.563-1.66c-1.185-.854-3.167-1.544-4.597-1.544-2.115 0-4.23.762-5.782 2.101-1.226 1.05-2.686 2.967-2.686 6.099v6.263c1.91 1.133 3.125 2.833 3.432 4.821.286 1.886-.286 3.791-1.522 5.1a.694.694 0 01-.5.216"
></path>
<path
fill="currentColor"
d="M22.003 40.31c-1.164 0-2.114-.999-2.114-2.235 0-1.236.95-2.235 2.114-2.235h2.115c.388 0 .705.33.705.741 0 .412-.317.742-.705.742h-2.115c-.388 0-.705.34-.705.742 0 .402.317.742.705.742.388 0 .705.33.705.741 0 .412-.317.742-.705.742M33.996 40.31c-.388 0-.705-.33-.705-.741 0-.412.317-.742.705-.742.388 0 .705-.33.705-.742s-.317-.741-.705-.741h-6.354c-.388 0-.704-.33-.704-.742s.316-.742.704-.742h6.354c1.165 0 2.115 1 2.115 2.236 0 1.236-.95 2.235-2.115 2.235"
></path>
</svg>
);
};
export default ChessTablesIcon;
src/components/icons/activities/ClimbingRoomIcon.tsx
+22
View File
@@ -0,0 +1,22 @@
const ClimbingRoomIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.63"
d="M37.897 16.874c-.768 0-1.4.626-1.4 1.398V22.3c0 .528-.301 1.017-.768 1.252l-3.422 1.71h-6.99l-3.423-1.71a1.399 1.399 0 01-.778-1.252v-4.028c0-.772-.622-1.398-1.4-1.398-.777 0-1.4.626-1.4 1.398v3.696c0 1.593.895 3.04 2.324 3.754l4.676 2.337v3.5l-4.044-2.699c-1.857-1.241-4.346.098-4.346 2.327v6.658c0 .772.622 1.398 1.4 1.398.778 0 1.4-.626 1.4-1.398v-6.296l3.899 2.434a6.98 6.98 0 003.704 1.066h2.187v9.786c0 .773.623 1.398 1.4 1.398.778 0 1.4-.625 1.4-1.398V28.05l4.677-2.337a4.204 4.204 0 002.323-3.754v-3.695c0-.773-.622-1.398-1.4-1.398l-.02.01zm4.2-1.398h-1.4c-.768 0-1.4-.625-1.4-1.398 0-.772.622-1.398 1.4-1.398h1.4c.768 0 1.4.626 1.4 1.398 0 .773-.622 1.398-1.4 1.398zm-20.98 1.398h-2.8c-.769 0-1.4-.625-1.4-1.398 0-.772.622-1.398 1.4-1.398h2.8c.767 0 1.4.626 1.4 1.398 0 .773-.633 1.398-1.4 1.398zm-1.4 25.175h-3.5c-.769 0-1.4-.626-1.4-1.398 0-.772.622-1.398 1.4-1.398h3.5c.767 0 1.4.626 1.4 1.398 0 .772-.623 1.398-1.4 1.398zm19.765-3.441h-2.8c-.768 0-1.4.625-1.4 1.398 0 .772.622 1.398 1.4 1.398h2.8c.768 0 1.4-.626 1.4-1.398 0-.773-.623-1.398-1.4-1.398zm-7.175-19.984a3.845 3.845 0 01-3.85 3.843c-2.13 0-3.85-1.721-3.85-3.843a3.845 3.845 0 013.85-3.842c2.129 0 3.85 1.72 3.85 3.842z"
></path>
</svg>
);
}
export default ClimbingRoomIcon
src/components/icons/activities/CommunalDiningTablesIcon.tsx
+22
View File
@@ -0,0 +1,22 @@
const CommunalDiningTablesIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
d="M10.194 26.768h35.6v-1.315L38.99 18.5H17.007l-6.803 6.953v1.315h-.01zm37.214 1.65H8.569v-3.654l7.754-7.924h23.321l7.754 7.924v3.654h.01z"
></path>
<path
fill="currentColor"
d="M18.284 27.593H16.67v6.62h1.614v-6.62zM13.431 27.593h-1.614v11.578h1.614V27.593zM39.317 27.593h-1.614v6.62h1.614v-6.62zM44.169 27.593h-1.614v11.578h1.614V27.593z"
></path>
</svg>
);
};
export default CommunalDiningTablesIcon;
src/components/icons/activities/IndoorLapPoolIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const IndoorLapPoolIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
stroke="currentColor"
strokeLinecap="square"
strokeLinejoin="round"
strokeWidth="1.83"
d="M22.21 25.684h12.383m-12.384-4.23h12.384m-3.858-4.387c0-1.178 1.016-2.12 2.256-2.12 1.24 0 2.256.952 2.256 2.12v14.132M17.648 17.067c0-1.178 1.016-2.12 2.256-2.12 1.24 0 2.256.952 2.256 2.12v14.132m29.553 4.21c-1.035 1.895-3.271 3.2-5.85 3.2-2.578 0-4.815-1.305-5.85-3.2-1.035 1.895-3.271 3.2-5.85 3.2-2.578 0-4.815-1.305-5.85-3.2-1.035 1.895-3.271 3.2-5.85 3.2-2.578 0-4.815-1.305-5.85-3.2-1.035 1.895-3.271 3.2-5.85 3.2-2.578 0-4.815-1.305-5.85-3.2m47.63-6.722c-1.074 1.894-3.379 3.2-6.045 3.2s-4.971-1.306-6.045-3.2c-1.075 1.894-3.38 3.2-6.046 3.2-2.666 0-4.97-1.306-6.045-3.2-1.074 1.894-3.37 3.2-6.045 3.2-2.676 0-4.971-1.306-6.046-3.2-1.074 1.894-3.379 3.2-6.045 3.2s-4.971-1.306-6.045-3.2"
></path>
</svg>
);
};
export default IndoorLapPoolIcon;
src/components/icons/activities/LushLandscapeIcon.tsx
+34
View File
@@ -0,0 +1,34 @@
const LushLandscapeIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<mask
id="mask0_695_1388"
style={{ maskType: "luminance" }}
width="56"
height="56"
x="0"
y="0"
maskUnits="userSpaceOnUse"
>
<path fill="#fff" d="M56 0H0v56h56V0z"></path>
</mask>
<g mask="url(#mask0_695_1388)">
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.76"
d="M33.18 45.025s.434-2.999 3.36-3.718m-5.862 3.405s.238-4.977 3.67-7.268m-12.707 7.57s-.434-2.998-3.36-3.717m5.873 3.405s-.248-4.977-3.67-7.268m3.4-10.173l3.671 3.446m0-3.197l2.203-2.01m-2.203-2.28v21.482m-3.68-28.416a4.035 4.035 0 01-.187-1.24c0-2.238 1.8-4.05 4.023-4.05s4.022 1.812 4.022 4.05v.271m2.285 8.56a5.192 5.192 0 012.926 4.425c.134 2.874-2.058 5.3-4.901 5.435-2.72.136-4.488-1.072-4.488-1.072m-7.444-10.632a4.046 4.046 0 01-.259-1.457c0-2.302 1.79-4.176 4.033-4.3m7.848-.97c2.171.563 3.784 2.562 3.784 4.926a5.116 5.116 0 01-1.5 3.634m-13.379-1.833a6.169 6.169 0 00-2.988 5.384c.052 3.3 2.895 5.768 5.883 6.08 3.195.334 4.012-.832 4.012-.832"
></path>
</g>
</svg>
);
};
export default LushLandscapeIcon;
src/components/icons/activities/MultiPurposeCourtIcon.tsx
+104
View File
@@ -0,0 +1,104 @@
const MultiPurposeCourtIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
d="M41.643 27.883c0 .137-.01.284-.03.411l.353.04a3.53 3.53 0 000-.92l-.353.039c.02.137.03.274.03.41"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M41.643 27.883c0 .137-.01.284-.03.411l.353.04a3.53 3.53 0 000-.92l-.353.039c.02.137.03.274.03.41v.02z"
></path>
<path
fill="currentColor"
d="M41.74 29.126l-.255-.108c-.088.215-.205.42-.352.607l.215.166c.157-.205.284-.43.382-.675"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M41.74 29.126l-.255-.108c-.088.215-.205.42-.352.607l.215.166c.157-.205.284-.43.382-.675l.01.01z"
></path>
<path
fill="currentColor"
d="M41.74 26.63a3.075 3.075 0 00-.382-.675l-.215.166c.146.186.264.392.352.607l.254-.107-.01.01z"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M41.74 26.63a3.075 3.075 0 00-.382-.675l-.215.166c.146.186.264.392.352.607l.254-.107-.01.01z"
></path>
<path
fill="currentColor"
d="M14.26 29.126c.098.244.225.47.381.675l.216-.166a2.516 2.516 0 01-.352-.607l-.255.108.01-.01z"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M14.26 29.126c.098.244.225.47.381.675l.216-.166a2.516 2.516 0 01-.352-.607l-.255.108.01-.01z"
></path>
<path
fill="currentColor"
d="M14.387 27.462l-.352-.039c-.039.304-.039.607 0 .91l.352-.039a2.965 2.965 0 010-.832z"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M14.387 27.462l-.352-.039c-.039.304-.039.607 0 .91l.352-.039a2.965 2.965 0 010-.832z"
></path>
<path
fill="currentColor"
d="M14.857 26.131l-.216-.166c-.156.205-.283.43-.381.675l.254.107c.088-.215.206-.42.353-.606"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M14.857 26.131l-.216-.166c-.156.205-.283.43-.381.675l.254.107c.088-.215.206-.42.353-.606l-.01-.01z"
></path>
<path
fill="currentColor"
d="M47.965 18.164h-3.582c-5.295 0-9.6 4.355-9.6 9.719 0 5.363 4.305 9.718 9.6 9.718h3.582v2.388H28.147V31.21c1.742-.078 3.141-1.537 3.141-3.327 0-1.791-1.4-3.25-3.141-3.328v-8.554h19.818v2.163zm-9.278 6.822v5.784c-1.507-.079-2.71-1.341-2.71-2.887 0-1.547 1.203-2.81 2.71-2.888m9.278-.303h-9.131c-1.742 0-3.152 1.429-3.152 3.19 0 1.762 1.42 3.191 3.152 3.191h9.13v6.224h-3.581c-5.128 0-9.307-4.227-9.307-9.414 0-5.187 4.179-9.415 9.307-9.415h3.582v6.224zm0 6.087h-7.8c.205-.097.41-.215.587-.362l-.176-.235a2.676 2.676 0 01-.646.382l.088.215h-.812v-.029c-.079.01-.157.02-.225.02v-5.775c.078 0 .156 0 .225.02v-.02h.812l-.088.226c.225.097.45.225.646.381l.176-.235a2.859 2.859 0 00-.597-.362h7.8v5.784l.01-.01zm-19.818-5.92c1.585.078 2.848 1.409 2.848 3.024 0 1.614-1.263 2.945-2.848 3.024v-6.058.01zm-.294-.294c-1.742.078-3.142 1.536-3.142 3.327s1.4 3.25 3.142 3.328v8.779H8.035V37.61h3.582c5.294 0 9.6-4.355 9.6-9.719 0-5.363-4.306-9.718-9.6-9.718H8.035v-2.163h19.818v8.554zm0 6.351c-1.585-.078-2.848-1.409-2.848-3.024 0-1.614 1.263-2.945 2.848-3.024v6.058-.01zm-10.53-.137v-5.784c1.507.079 2.71 1.341 2.71 2.888 0 1.546-1.203 2.808-2.71 2.887m-9.278.303h9.13c1.743 0 3.152-1.429 3.152-3.19 0-1.762-1.42-3.19-3.151-3.19H8.045v-6.225h3.582c5.128 0 9.307 4.228 9.307 9.415 0 5.186-4.18 9.414-9.307 9.414H8.045v-6.224zm0-6.087h7.8a3.14 3.14 0 00-.597.362l.176.235c.196-.157.41-.284.646-.382l-.088-.225h.812v.02c.078-.01.157-.02.225-.02v5.774c-.078 0-.147 0-.225-.02v.03h-.812l.088-.215a2.677 2.677 0 01-.646-.382l-.176.235c.186.147.381.264.587.362h-7.8v-5.784l.01.01zm20.111-9.288H7.751v24.575h40.517V15.698H28.156z"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M47.965 18.164h-3.582c-5.295 0-9.6 4.355-9.6 9.719 0 5.363 4.305 9.718 9.6 9.718h3.582v2.388H28.147V31.21c1.742-.078 3.141-1.537 3.141-3.327 0-1.791-1.4-3.25-3.141-3.328v-8.554h19.818v2.163zm-9.278 6.822v5.784c-1.507-.079-2.71-1.341-2.71-2.887 0-1.547 1.203-2.81 2.71-2.888v-.01zm9.278-.304h-9.131c-1.742 0-3.152 1.43-3.152 3.19 0 1.762 1.42 3.191 3.152 3.191h9.13v6.225h-3.581c-5.128 0-9.307-4.228-9.307-9.415 0-5.187 4.179-9.415 9.307-9.415h3.582v6.224zm0 6.088h-7.8c.205-.098.41-.216.587-.362l-.176-.235a2.68 2.68 0 01-.646.381l.088.216h-.812v-.03c-.079.01-.157.02-.225.02v-5.774c.078 0 .156 0 .225.02v-.02h.812l-.088.225c.225.098.45.225.646.382l.176-.235a2.859 2.859 0 00-.597-.363h7.8v5.784l.01-.01zm-19.818-5.921c1.585.078 2.848 1.409 2.848 3.024s-1.263 2.946-2.848 3.024v-6.058.01zm-.294-.294c-1.742.078-3.142 1.537-3.142 3.328 0 1.79 1.4 3.249 3.142 3.327v8.779H8.035V37.6h3.582c5.294 0 9.6-4.355 9.6-9.718 0-5.364-4.306-9.719-9.6-9.719H8.035v-2.163h19.818v8.554zm0 6.352c-1.585-.079-2.848-1.41-2.848-3.024 0-1.615 1.263-2.946 2.848-3.024v6.057-.01zm-10.53-.137v-5.784c1.507.078 2.71 1.34 2.71 2.887 0 1.546-1.203 2.809-2.71 2.887v.01zm-9.278.303h9.13c1.743 0 3.152-1.429 3.152-3.19 0-1.762-1.42-3.19-3.151-3.19H8.045v-6.225h3.582c5.128 0 9.307 4.228 9.307 9.415 0 5.186-4.18 9.414-9.307 9.414H8.045v-6.224zm0-6.087h7.8a3.14 3.14 0 00-.597.362l.176.235c.196-.157.41-.284.646-.382l-.088-.225h.812v.02c.078-.01.157-.02.225-.02v5.774c-.078 0-.147 0-.225-.02v.03h-.812l.088-.215a2.676 2.676 0 01-.646-.382l-.176.235c.186.147.381.264.587.362h-7.8v-5.784l.01.01zm20.111-9.288H7.751v24.575h40.517V15.698H28.156z"
></path>
<path
fill="currentColor"
d="M45.744 27.09c.431 0 .793.352.793.793a.79.79 0 01-.793.792.79.79 0 01-.792-.792.79.79 0 01.792-.793zm.989.607h.137v.362h-.137v-.362zm-.989 1.174a.99.99 0 00.91-.607h.216v1.478h.205v-3.729h-.205v1.478h-.215a1 1 0 00-.91-.607.986.986 0 00-.99.989c0 .548.441.988.99.988"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M45.744 27.09c.431 0 .793.352.793.793a.79.79 0 01-.793.792.79.79 0 01-.792-.792.79.79 0 01.792-.793zm.989.607h.137v.362h-.137v-.362zm-.989 1.174a.99.99 0 00.91-.607h.216v1.478h.205v-3.729h-.205v1.478h-.215a1 1 0 00-.91-.607.986.986 0 00-.99.989c0 .548.441.988.99.988v.01z"
></path>
<path
fill="currentColor"
d="M10.246 28.675a.79.79 0 01-.793-.793.79.79 0 01.793-.792.79.79 0 01.793.792.79.79 0 01-.793.793zm-.988-.607H9.12v-.362h.137v.362zm.988-1.174a.99.99 0 00-.91.607H9.12v-1.478h-.206v3.729h.206v-1.478h.215a.99.99 0 00.91.607c.548 0 .989-.44.989-.989a.986.986 0 00-.989-.988"
></path>
<path
stroke="currentColor"
strokeMiterlimit="10"
strokeWidth="0.95"
d="M10.246 28.675a.79.79 0 01-.793-.793.79.79 0 01.793-.792.79.79 0 01.793.792.79.79 0 01-.793.793zm-.988-.607H9.12v-.362h.137v.362zm.988-1.174a.99.99 0 00-.91.607H9.12v-1.478h-.206v3.729h.206v-1.478h.215a.99.99 0 00.91.607c.548 0 .989-.44.989-.989a.986.986 0 00-.989-.988v-.01z"
></path>
</svg>
);
};
export default MultiPurposeCourtIcon;
src/components/icons/activities/OutdoorCinemaIcon.tsx
+27
View File
@@ -0,0 +1,27 @@
const OutdoorCinemaIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<rect width="56" height="56" fill="#F3F3F2" rx="8"></rect>
<path
fill="currentColor"
d="M19 14.875c-1.73 0-3.132 1.43-3.132 3.189 0 .505.127 1.001.38 1.487l.282.545-.448.418a3.164 3.164 0 00-1.012 2.323c0 .817.76 1.595 1.567 1.595h21.14c1.723 0 3.133-1.43 3.133-3.189 0-1.76-1.4-3.18-3.132-3.18a.27.27 0 00-.088.01c-.048 0-.107.02-.155.02l-.565.049-.224-.525a3.129 3.129 0 00-2.88-1.935c-.563 0-1.099.155-1.605.467l-.72.437-.379-.758c-.545-1.07-1.605-1.74-2.773-1.74-.253 0-.515.038-.846.136l-.681.194-.253-.68c-.467-1.245-1.615-2.042-2.91-2.042-1.517 0-2.81 1.108-3.073 2.625l-.146.816-.798-.184a2.87 2.87 0 00-.681-.078zm18.788 11.142H16.646c-1.663 0-3.132-1.488-3.132-3.18a4.72 4.72 0 011.109-3.062 4.735 4.735 0 01-.331-1.711c0-2.722 2.267-4.949 4.972-4.764.651-1.886 2.403-3.189 4.426-3.189 1.722 0 3.26.933 4.086 2.44a4.45 4.45 0 01.613-.048c1.499 0 2.88.729 3.756 1.934a4.606 4.606 0 011.722-.34c1.693 0 3.24.924 4.066 2.392 2.52.087 4.544 2.197 4.544 4.773 0 2.577-2.111 4.774-4.7 4.774"
></path>
<path
fill="currentColor"
d="M19.623 20.893a3.741 3.741 0 01.049-1.575 3.564 3.564 0 011.624-2.187 3.423 3.423 0 012.666-.38c.516.136.973.38 1.382.72l-1.012 1.215a1.877 1.877 0 00-.769-.398c-1.05-.282-2.11.36-2.383 1.419a1.901 1.901 0 00-.03.875l-1.537.292.01.019zM27.669 22.303a3.742 3.742 0 01.049-1.575c.486-1.916 2.412-3.063 4.3-2.567.515.136.973.38 1.381.72l-1.011 1.215a1.766 1.766 0 00-.77-.399c-1.04-.282-2.11.36-2.383 1.42a1.902 1.902 0 00-.029.875l-1.537.291v.02zM25.576 45.15l-.788-19.891 1.566-.069.788 19.902-1.566.058zM22.289 45.218l-2.345-19.902 1.557-.194 2.345 19.901-1.557.195zM30.433 45.15l-1.567-.058.779-19.902 1.566.069-.778 19.891zM33.71 45.218l-1.557-.195 2.355-19.9 1.547.194-2.345 19.9z"
></path>
<path
fill="currentColor"
d="M20.42 44.324h15.157l3.6-18.307H16.82l3.6 18.307zm16.442 1.594H19.135l-4.232-21.486h26.181l-4.222 21.486z"
></path>
</svg>
);
};
export default OutdoorCinemaIcon;
src/components/icons/activities/OutdoorCoworkingSpaceIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const OutdoorCoworkingSpaceIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.69"
d="M7.65 38.214h40.248m-35.76 0l-.873-7h10.5l-.873 7m3.504-2.621l.753-2.01c.08-.19.11-.39.11-.612 0-.18-.03-.361-.08-.522l-1.837-5.785a3.487 3.487 0 00-3.333-2.44H13.01a3.487 3.487 0 00-3.333 2.44L7.841 32.45c-.05.17-.08.342-.08.522 0 .221.03.422.11.613l.753 2.008m34.777 2.622l.873-7H33.773l.873 7m-3.503-2.621l-.753-2.01c-.08-.19-.11-.39-.11-.612 0-.18.03-.361.08-.522l1.837-5.785a3.496 3.496 0 013.333-2.44h6.997a3.487 3.487 0 013.334 2.44l1.837 5.785a1.746 1.746 0 01-.03 1.135l-.753 2.009m-26.906-18.37a3.499 3.499 0 01-3.504 3.496 3.499 3.499 0 01-3.504-3.495 3.499 3.499 0 013.504-3.495 3.499 3.499 0 013.504 3.495zm15.52 0a3.499 3.499 0 003.505 3.496 3.49 3.49 0 003.493-3.495 3.497 3.497 0 00-3.493-3.495 3.505 3.505 0 00-3.504 3.495z"
></path>
</svg>
);
};
export default OutdoorCoworkingSpaceIcon;
src/components/icons/activities/PadelPongIcon.tsx
+18
View File
@@ -0,0 +1,18 @@
const PadelPongIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
d="M34.836 11.796a7.664 7.664 0 012.034 2.788c.714 1.621 1.061 3.351 1.041 5.269v.573l-.992-.01v-.573c.02-1.74-.287-3.282-.932-4.735a6.731 6.731 0 00-1.756-2.393c-1.935-1.67-4.603-1.907-6.806-.593-2.202 1.315-3.59 3.974-3.551 6.782a7.79 7.79 0 00.655 3.044 9.636 9.636 0 002.768 3.638l.406.326-.565.94-.407-.327c-1.36-1.107-2.361-2.431-3.085-4.053a9.034 9.034 0 01-.764-3.549c-.06-3.242 1.547-6.316 4.087-7.829 2.54-1.512 5.615-1.245 7.857.692m-.516 2.047l-.883.524-.456-1.029.883-.523.456 1.028zm-6.617 2.659l.883-.524.456 1.028-.882.524-.457-1.028zm4.861-1.612l-.883.524-.456-1.028.883-.524.456 1.028zm-3.095.554l.883-.524.456 1.028-.882.524-.457-1.028zm-3.948 3.658l-.883.523-.456-1.028.883-.523.456 1.027zm.426-1.552l.883-.524.457 1.028-.883.524-.457-1.028zm8.909 5.031l.883-.524.456 1.028-.883.524-.456-1.028zm-3.522 2.106l.883-.524.456 1.028-.883.524-.456-1.028zm1.766-1.058l.883-.524.456 1.028-.883.524-.456-1.028zm-3.522 2.106l.883-.524.456 1.028-.882.524-.457-1.028zm5.268-5.734l.883-.524.456 1.028-.883.524-.456-1.028zm-5.714 4.715l-.883.524-.456-1.028.883-.524.456 1.028zm.426-1.552l.883-.523.457 1.027-.883.524-.457-1.028zm1.766-1.057l.883-.524.456 1.028-.883.524-.456-1.028zm1.766-1.058l.883-.524.456 1.028-.883.524-.456-1.028zm-.456-1.028l-.883.524-.457-1.028.883-.524.457 1.028zm-6.627 2.659l.883-.524.456 1.028-.883.524-.456-1.028zm4.86-1.611l-.882.524-.456-1.028.883-.524.456 1.028zm3.95-3.658l.882-.524.456 1.028-.883.524-.456-1.028zm-.427 1.552l-.883.524-.457-1.028.883-.524.457 1.028zm-6.617 2.66l.883-.525.456 1.028-.883.524-.456-1.028zm6.14-6.268l.883-.524.457 1.028-.883.524-.457-1.028zm-8.809 5.269l.883-.524.456 1.028-.883.524-.456-1.028zm8.383-3.717l-.883.524-.456-1.028.883-.524.456 1.028zm-6.617 2.66l.883-.525.456 1.028-.883.524-.456-1.028zm3.095-.554l-.883.523-.456-1.028.883-.524.456 1.029zm1.766-1.058l-.883.524-.456-1.028.883-.524.456 1.028zm-2.262-5.12l.883-.525.456 1.028-.882.524-.457-1.028zm-1.766 1.057l.883-.524.456 1.028-.882.524-.457-1.028zm-1.766 1.058l.883-.524.457 1.028-.883.524-.457-1.028zm9.703 11.684c-.229.751-.477 1.562-.516 1.71-.07.228-.13.455-.169.702a4.33 4.33 0 00-.585-.247c-.13-.04-.843-.277-1.498-.504l2.777-1.66h-.01zm-4.256 2.353c.05.02 2.688.9 2.708.91.258.088.506.207.744.365a.622.622 0 00.665.02.847.847 0 00.377-.633c.03-.316.089-.623.178-.91 0 0 .923-3.044.943-3.093l.367-1.325-7.113 4.25 1.14.426-.01-.01zm6.944 10.211l-.625-1.413 2.212-.03.625 1.414-2.212.03zm-.05-5.15l-2.083.03 1.657-.989.426.969v-.01zm-1.706 1.176l2.212-.03.625 1.414-2.212.03-.625-1.414zm2.262 5.121l2.083-.03-1.657.989-.426-.959zM37.89 26.11c-.218.751-.436 1.463-.645 2.125-.099.307-.188.603-.277.88a3.329 3.329 0 00.119 2.234l.297.702-1.775 1.058-.318-.692c-.317-.682-.853-1.196-1.488-1.414-.248-.079-.506-.168-.764-.247a52.813 52.813 0 01-1.865-.633c-1.32-.474-3.273-1.275-5-2.678-1.488-1.216-2.599-2.68-3.392-4.469-.556-1.255-.844-2.62-.873-4.052-.06-3.678 1.756-7.157 4.623-8.877 2.867-1.72 6.368-1.404 8.898.79a8.968 8.968 0 012.331 3.183c.794 1.79 1.171 3.688 1.151 5.813-.02 2.452-.595 4.755-1.032 6.287M36.026 9.918c-2.837-2.461-6.736-2.807-9.95-.89-3.204 1.918-5.228 5.813-5.158 9.925.03 1.611.357 3.144.982 4.557.873 1.967 2.083 3.559 3.7 4.884 1.835 1.492 3.889 2.333 5.268 2.837.664.237 1.3.444 1.895.642.258.09.515.168.754.247.377.129.704.435.892.85l.546 1.187 3.849 8.709 3.522-2.106-3.85-8.69-.515-1.215a1.934 1.934 0 01-.07-1.335c.08-.276.179-.573.268-.87.209-.672.437-1.393.655-2.154.456-1.602 1.061-4.024 1.081-6.633.02-2.304-.397-4.38-1.26-6.347a10.13 10.13 0 00-2.619-3.578M18.796 30.983a7.354 7.354 0 00-4.127 1.889 7.254 7.254 0 00-2.341 5.496c2.41-.336 3.283-2.086 4.196-3.944.615-1.246 1.25-2.531 2.262-3.44m-7.331 8.382l-.04-.455a8.203 8.203 0 012.609-6.721 8.215 8.215 0 016.409-2.145l1.884.187-1.756.702c-1.617.643-2.4 2.224-3.224 3.895-1.002 2.026-2.133 4.31-5.436 4.508l-.446.03zm1.23 1.157a7.304 7.304 0 001.577 2.669 7.3 7.3 0 002.53 1.78c.704-3.391 3.283-4.43 5.575-5.349 2.123-.85 3.958-1.581 3.84-4.537a7.21 7.21 0 00-1.231-1.81 7.088 7.088 0 00-1.706-1.363c-2.937-.346-3.81 1.423-4.822 3.47-1.09 2.214-2.32 4.705-5.763 5.14zm4.85 5.684l-.525-.178a8.296 8.296 0 01-3.432-2.214 8.26 8.26 0 01-1.945-3.589l-.139-.543.556-.03c3.343-.188 4.424-2.372 5.565-4.676 1.032-2.086 2.193-4.448 5.853-3.964h.09l.079.06a8.403 8.403 0 012.014 1.591 8.333 8.333 0 011.428 2.125l.04.08v.088c.198 3.688-2.242 4.666-4.405 5.526-2.39.96-4.652 1.859-5.099 5.18l-.08.554v-.01zm1.37-.712a7.235 7.235 0 005.664-1.908 7.211 7.211 0 002.203-3.964c-.992.94-2.312 1.473-3.611 1.987-1.925.771-3.74 1.503-4.266 3.875m.724.96c-.446 0-.893-.04-1.34-.11l-.446-.069.06-.445c.446-3.282 2.827-4.23 4.92-5.07 1.727-.693 3.363-1.345 4.137-2.907l.833-1.7.04 1.888a8.27 8.27 0 01-2.639 6.228 8.156 8.156 0 01-5.565 2.184z"
></path>
</svg>
);
};
export default PadelPongIcon;
src/components/icons/activities/PingPongInATableIcon.tsx
+23
View File
@@ -0,0 +1,23 @@
const PingPongInATableIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
d="M32.48 13.757a6.052 6.052 0 011.578 2.15c.552 1.25.824 2.587.804 4.08v.445h-.775v-.446c.02-1.346-.222-2.538-.716-3.662a5.183 5.183 0 00-1.356-1.85c-1.502-1.299-3.564-1.473-5.269-.456-1.705 1.017-2.78 3.081-2.74 5.251.018.843.183 1.628.503 2.355a7.381 7.381 0 002.14 2.81l.31.26-.436.728-.31-.252a8.216 8.216 0 01-2.382-3.14 7.029 7.029 0 01-.591-2.741c-.039-2.51 1.2-4.883 3.157-6.056 1.966-1.172 4.349-.959 6.083.533m-.397 1.58l-.678.406-.35-.794.679-.407.349.794zm-5.124 2.063l.678-.407.349.795-.678.406-.349-.794zm3.758-1.25l-.678.407-.349-.794.678-.407.349.794zm-2.392.427l.678-.407.348.794-.678.407-.348-.794zm-3.06 2.829l-.679.407-.348-.795.678-.407.348.795zm.328-1.202l.678-.407.35.795-.679.407-.349-.795zm6.896 3.895l.678-.407.349.795-.678.407-.349-.795zm-2.73 1.628l.677-.407.349.794-.678.407-.349-.794zm1.365-.814l.678-.407.348.794-.678.407-.348-.794zm-2.732 1.627l.678-.406.35.794-.679.407-.349-.795zm4.078-4.437l.678-.407.349.795-.678.407-.35-.795zm-4.426 3.643l-.678.407-.349-.794.678-.407.349.794zm.33-1.201l.677-.407.349.794-.678.407-.349-.794zm1.365-.814l.678-.407.348.794-.678.407-.348-.794zm1.365-.814l.678-.407.349.795-.678.407-.349-.795zm-.348-.794l-.678.406-.349-.794.678-.407.349.794zm-5.124 2.063l.678-.407.349.795-.678.407-.349-.795zm3.758-1.25l-.678.407-.349-.794.678-.407.35.794zm3.06-2.829l.678-.407.35.795-.679.407-.348-.795zm-.329 1.202l-.678.407-.348-.795.678-.407.348.795zm-5.123 2.063l.678-.407.348.795-.678.407-.348-.795zm4.755-4.844l.678-.407.349.795-.678.406-.349-.794zm-6.818 4.079l.678-.407.349.794-.678.407-.35-.794zm6.489-2.878l-.678.407-.349-.794.678-.407.349.794zm-5.123 2.064l.677-.407.35.795-.679.407-.349-.795zm2.392-.426l-.678.407-.349-.795.678-.407.349.795zm1.365-.814l-.678.407-.348-.795.678-.407.348.795zm-1.753-3.963l.688-.407.349.795-.678.407-.349-.795h-.01zm-1.365.814l.678-.407.348.795-.678.407-.348-.795zm-1.366.814l.678-.407.349.795-.678.407-.349-.795zm7.506 9.04a89.357 89.357 0 01-.407 1.327 4.928 4.928 0 00-.126.542 2.682 2.682 0 00-.455-.193 74.863 74.863 0 01-1.162-.388l2.14-1.279.01-.01zm-3.293 1.82s2.082.698 2.102.708c.203.068.397.165.58.281a.47.47 0 00.514.01.629.629 0 00.29-.494c.02-.242.069-.485.136-.707 0-.02.717-2.355.727-2.394l.28-1.027-5.51 3.295.881.329zm5.375 7.897l-.484-1.095 1.715-.02.484 1.096-1.715.02zm-.038-3.982l-1.618.02 1.288-.766.33.746zm-1.318.91l1.715-.018.484 1.094-1.714.02-.484-1.095zm1.754 3.964l1.617-.02-1.279.765-.329-.745h-.01zm-.727-11.007c-.164.582-.339 1.134-.494 1.647-.077.233-.145.465-.213.679a2.515 2.515 0 00.097 1.724l.232.543-1.375.823-.242-.533c-.242-.533-.668-.93-1.153-1.095-.193-.067-.387-.125-.59-.193-.456-.146-.94-.31-1.444-.485-1.016-.368-2.537-.988-3.864-2.073a9.09 9.09 0 01-2.624-3.459 8.103 8.103 0 01-.678-3.139c-.049-2.848 1.355-5.542 3.573-6.87 2.218-1.327 4.93-1.084 6.886.611a6.96 6.96 0 011.802 2.461c.61 1.386.9 2.858.891 4.496-.01 1.889-.465 3.681-.794 4.863m-1.434-12.537c-2.198-1.899-5.22-2.17-7.7-.688-2.479 1.483-4.048 4.496-3.99 7.683.02 1.25.281 2.432.756 3.527.668 1.521 1.608 2.761 2.867 3.779 1.423 1.162 3.012 1.811 4.077 2.199.513.184 1.007.349 1.463.494.203.068.397.126.59.194.29.097.543.339.688.649l.417.92 2.983 6.734 2.73-1.628-2.973-6.724-.406-.94a1.585 1.585 0 01-.059-1.036c.068-.213.136-.446.204-.678.165-.514.339-1.076.504-1.667.348-1.24.823-3.12.832-5.135.01-1.782-.31-3.39-.978-4.912-.484-1.085-1.162-2.025-2.024-2.77"
></path>
<path
stroke="currentColor"
strokeWidth="1.73"
d="M11.589 39.295h33.714"
></path>
</svg>
);
};
export default PingPongInATableIcon;
src/components/icons/activities/RunningWheelIcon.tsx
+26
View File
@@ -0,0 +1,26 @@
const RunningWheelIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
d="M15.357 39.006c2.3.335 6.194.617 8.524-.576 2.538-1.299 3.812-3.466 4.35-4.64a7.429 7.429 0 011.46-2.083l9.664-9.727c-.373-2.786-3.708-4.304-5.137-4.838-1.585 4.031-3.646 6.419-6.142 7.11-2.652.722-5.116-.68-6.525-1.76.145 1.016.352 2.168.642 3.425.89 3.937-.808 8.01-.88 8.178a.628.628 0 01-.207.282c-.156.126-3.656 3.026-5.749 4.618m3.812 1.77c-3.087 0-5.904-.66-5.945-.67a.745.745 0 01-.528-.817.747.747 0 01.56-.618c.082-.042.29-.178.807-.565.01 0 .052-.032.062-.042 1.73-1.278 5.127-4.084 5.872-4.702.29-.754 1.43-4.063.736-7.12a40.98 40.98 0 01-.725-4 1.286 1.286 0 01.663-1.31 1.307 1.307 0 011.48.148c1.109.91 3.294 2.345 5.521 1.738 2.144-.587 3.956-2.89 5.396-6.859a.734.734 0 01.89-.46c.27.073 6.64 1.884 6.898 6.722a.778.778 0 01-.217.565l-9.901 9.969a6.098 6.098 0 00-1.17 1.654c-.612 1.34-2.093 3.833-5.024 5.34-1.533.776-3.51 1.027-5.396 1.027"
></path>
<path
fill="currentColor"
d="M20.785 41.445c1.636 0 3.128 0 3.925.032 1.233.052 5.396-4.346 8.565-8.43a.702.702 0 01.156-.146c3.873-2.775 8.099-6.45 8.182-7.56.083-1.11-.788-1.822-1.336-2.168l-9.508 9.581a6.098 6.098 0 00-1.17 1.655c-.611 1.34-2.082 3.832-5.023 5.34-3.356 1.707-8.876.838-10.72.482-.135.345-.176.639-.104.88a.85.85 0 00.228.366c.891 0 4.04-.032 6.805-.032zm3.925 1.519h-.041c-2.33-.073-10.823 0-10.906 0a.73.73 0 01-.332-.073 2.304 2.304 0 01-1.097-1.362c-.228-.754-.063-1.602.486-2.523a.75.75 0 01.85-.335c.973.272 7.053 1.36 10.232-.252 2.538-1.298 3.812-3.466 4.35-4.638a7.427 7.427 0 011.46-2.084l9.902-9.969a.725.725 0 01.818-.157c.114.052 2.858 1.225 2.672 3.874-.166 2.273-6.587 7.069-8.71 8.597-1.72 2.21-7.146 8.922-9.673 8.922M26.45 27.383h-4.743v1.486h4.744v-1.486z"
></path>
<path
fill="currentColor"
d="M25.311 29.729h-3.77v1.486h3.77V29.73zM24.545 32.304H20.92v1.487h3.625v-1.487zM33.287 16.87l-9.186-9.791 1.077-1.016 9.186 9.79-1.077 1.016zM20.932 22.23l-3.066-5.507L19.171 16l3.055 5.508-1.294.723zM43.146 41.487h-2.713v1.487h2.713v-1.487zM30.894 41.487H23.28v1.487h7.613v-1.487zM39.46 41.487h-6.991v1.487h6.99v-1.487z"
></path>
</svg>
);
};
export default RunningWheelIcon;
src/components/icons/activities/SunLoungingDeckIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
const SunLoungingDeckIcon = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.64"
d="M17.003 39.381h22.404M22.14 19.435H9.77l14.66-9.411m0 0l14.66 9.411H26.722m-2.292-9.411v21.16m22.261 8.432l-5.422-5.42a1.261 1.261 0 00-.634-.347h-.02a1.034 1.034 0 00-.257-.03h-20.49l-8.348-8.35a1.28 1.28 0 00-1.811 1.806l8.726 8.727c.113.113.236.194.379.256.01 0 .02.01.03.02a.86.86 0 00.174.051c.02 0 .052.02.072.02.082.021.153.021.235.021h20.512l5.053 5.053a1.28 1.28 0 001.811-1.807h-.01z"
></path>
</svg>
);
};
export default SunLoungingDeckIcon;
src/components/icons/activities/SuspendedLoungingNetsIcon.tsx
+19
View File
File diff suppressed because one or more lines are too long
src/components/icons/activities/WellnessFeaturesIcon.tsx
+22
View File
@@ -0,0 +1,22 @@
function WellnessFeaturesIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<path
fill="currentColor"
d="M11.918 27.667c-.576.411-1.29 1.646-1.28 2.92.01 1.568.312 3.333 2.444 4.499l9.737 5.341a4.674 4.674 0 004.644 0l15.124-8.556c1.3-.745 2.855-2.352 2.855-5.802 0-2.724-1.056-4.537-3.431-5.89l-7.87-4.273a7.288 7.288 0 00-7.216 0l-16.014 9.409 13.629 7.468 14.792-8.39c1.212-.607 2.444-.235 3.099.912.733 1.294.498 3.273-1.173 4.332L27.12 37.712l-.782-1.372 14.107-8.066a1.647 1.647 0 00.616-2.185c-.352-.617-.821-.382-.968-.304l-14.919 8.458c-.371.206-.84.215-1.212.01l-12.035-6.596-.01.01zm13.228 14.955a6.311 6.311 0 01-3.1-.813l-9.717-5.331c-2.904-1.598-3.256-4.117-3.265-5.88 0-1.363.576-2.814 1.407-3.725l-.84-.46a1.255 1.255 0 01-.646-1.069c0-.44.225-.862.616-1.088l16.542-9.722a8.876 8.876 0 018.78 0l7.87 4.273c2.854 1.627 4.243 3.999 4.243 7.272 0 4.44-2.288 6.4-3.657 7.184l-15.124 8.556a6.311 6.311 0 01-3.1.813"
></path>
<path
fill="currentColor"
d="M30.631 30.686l-15.378-8.36.753-1.392 15.388 8.37-.763 1.382z"
></path>
</svg>
);
}
export default WellnessFeaturesIcon;
src/index.css
+25
View File
@@ -174,3 +174,28 @@ body {
margin: 0;
}
}
/* scrollbar */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #c7bdba;
border-radius: 99px;
}
:fullscreen::backdrop {
background: none;
}
body {
scrollbar-color: #c7bdba;
scrollbar-width: thin;
}
src/types/descriptionFloor.ts
+7
View File
@@ -0,0 +1,7 @@
interface IDesctiptionFloor {
id: string;
wing: string;
floor: number;
}
export type { IDesctiptionFloor };