73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import Button from "../../Button";
|
|
import CrossIcon from "../../icons/CrossIcon";
|
|
import RightArrowSliderIcon from "../../icons/RightArrowSliderIcon";
|
|
|
|
interface MobileSkygardenDescriptionProps {
|
|
onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
isLeft: boolean;
|
|
}
|
|
|
|
const MobileSkygardenDescription = ({
|
|
onClick,
|
|
isLeft,
|
|
}: MobileSkygardenDescriptionProps) => {
|
|
return (
|
|
<>
|
|
<div
|
|
className={`bg-white rounded-2xl p-6 flex flex-col gap-4 w-[344px] absolute left-[414px] transition-opacity duration-300 desc-shadow h-fit`}
|
|
>
|
|
<div className="relative">
|
|
<div className="flex justify-between border-b pb-4">
|
|
<div className="flex flex-col items-start justify-start">
|
|
<p
|
|
className={`text-[#0D1922] font-semibold text-[20px] duration-300 ease-in-out text-subheadline-s`}
|
|
>
|
|
Sky Garden
|
|
</p>
|
|
</div>
|
|
<Button buttonType="tertiary" icon={<CrossIcon />} />
|
|
</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">8</p>
|
|
</div>
|
|
<p className="text-s text-[#73787C] w-full">Indoor</p>
|
|
</div>
|
|
<p className="text-s text-[#0D1922] text-nowrap">3 amenties</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">
|
|
8
|
|
</p>
|
|
</div>
|
|
<p className="text-s text-[#73787C]">Studio</p>
|
|
</div>
|
|
<p className="text-s text-[#0D1922] text-nowrap">14 amenties</p>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={onClick}
|
|
buttonType="cta"
|
|
className="justify-center"
|
|
text="Explore"
|
|
icon={<RightArrowSliderIcon />}
|
|
iconPos="right"
|
|
/>
|
|
</div>
|
|
<div
|
|
className={`w-0 h-0 border-t-0 border-r-[6px] border-b-[14px] border-l-[6px] border-transparent border-b-white absolute ${
|
|
isLeft ? "right-[0px]" : "left-[0px]"
|
|
} -top-[35px] `}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MobileSkygardenDescription;
|