41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { Link } from "react-router";
|
|
import UnitType from "../types/UnitType";
|
|
import Project from "../types/Project";
|
|
|
|
function UnitTypeCard({ project, type }: { project: Project; type: UnitType }) {
|
|
return (
|
|
<Link
|
|
target="_blank"
|
|
to={`/unit-types/${project.slug}/${type.slug}`}
|
|
className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw] hover:-translate-y-2 transition-[transform,box-shadow] duration-300 hover:[box-shadow:0_4px_16px_0_rgba(0,0,0,.1)]"
|
|
>
|
|
<div className="space-y-1 2xl:space-y-[0.278vw]">
|
|
<p className="text-s text-[#00BED7]">{project.title}</p>
|
|
<div className="flex items-center gap-2 2xl:gap-[0.556vw]">
|
|
{type.wing && (
|
|
<>
|
|
<p className="text-caption-m opacity-70">{type.wing}</p>
|
|
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
|
</>
|
|
)}
|
|
<p className="text-caption-m opacity-70">{type.floors}</p>
|
|
</div>
|
|
</div>
|
|
<div className="2xl:p-[1.111vw] 2xl:rounded-[0.556vw]">
|
|
<img
|
|
src={`/images/unit-types/${project.slug}/${type.slug}${
|
|
type.slug.includes("loft") ? "-lower" : ""
|
|
}${project.hasSides !== false && type.slug !== "2-bedroom-b" ? "-left" : ""}.jpg`}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div className="space-y-1 2xl:space-y-[0.278vw]">
|
|
<p className="text-s opacity-70">{type.area}</p>
|
|
<p className="text-h4 font-medium">{type.name}</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export default UnitTypeCard;
|