45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
interface ISkygardenDescriptionProps {
|
|
isLeft: boolean;
|
|
}
|
|
|
|
const SkygardenDescription = ({ isLeft }: ISkygardenDescriptionProps) => {
|
|
return (
|
|
<div className=" p-6">
|
|
<div
|
|
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 transition-all duration-300 ease-in-out absolute w-[364px] left-[414px] desc-shadow`}
|
|
>
|
|
<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 amenities
|
|
</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 amenities</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 amenities</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 absolute top-0 ${
|
|
isLeft ? "-right-[35px] rotate-90" : "-left-[35px] -rotate-90"
|
|
}`}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SkygardenDescription;
|