109 lines
4.6 KiB
TypeScript
109 lines
4.6 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
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 ZoneSlider from "./ZoneSlider";
|
|
import LayoutSlider from "./LayoutSlider";
|
|
|
|
interface ISkygardenSidebarProps {
|
|
onMouseEnter: () => void;
|
|
}
|
|
|
|
const SkygardenSidebar = ({ onMouseEnter }: ISkygardenSidebarProps) => {
|
|
return (
|
|
<div
|
|
className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] py-6 flex flex-col top-[56px]"
|
|
onMouseOver={onMouseEnter}
|
|
>
|
|
<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 font-semibold text-caption-m rounded-lg justify-center items-center mb-4 pb-4 mx-6 flex flex-col gap-1 pt-4">
|
|
<LayoutSlider />
|
|
</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;
|