Refactor ProjectSelect and UnitTypeCard components; enhance styling and add new unit types to projects data
This commit is contained in:
@@ -1,19 +1,25 @@
|
||||
interface UnitType {
|
||||
name: string;
|
||||
img: string;
|
||||
wings: string;
|
||||
floors: string;
|
||||
area: string;
|
||||
}
|
||||
import UnitType from "../types/UnitType";
|
||||
|
||||
function UnitTypeCard({ project, type }: { project: string; type: UnitType }) {
|
||||
return (
|
||||
<div className="bg-white p-4 rounded-2xl">
|
||||
<p className="text-2xl font-semibold leading-[135%]">{project}</p>
|
||||
<p className="text-2xl font-semibold leading-[135%]">{type.name}</p>
|
||||
<p className="text-2xl font-semibold leading-[135%]">{type.wings}</p>
|
||||
<p className="text-2xl font-semibold leading-[135%]">{type.floors}</p>
|
||||
<p className="text-2xl font-semibold leading-[135%]">{type.area}</p>
|
||||
<div className="bg-white p-4 2xl:p-[1.111vw] rounded-2xl 2xl:rounded-[1.111vw] space-y-4 2xl:space-y-[1.111vw]">
|
||||
<div className="space-y-1 2xl:space-y-[0.278vw]">
|
||||
<p className="text-s">{project}</p>
|
||||
<div className="flex items-center gap-2 2xl:gap-[0.556vw]">
|
||||
{type.wings && (
|
||||
<>
|
||||
<p className="text-caption-m text-[#0D1922]/70">{type.wings}</p>
|
||||
<div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
|
||||
</>
|
||||
)}
|
||||
<p className="text-caption-m text-[#0D1922]/70">{type.floors}</p>
|
||||
</div>
|
||||
</div>
|
||||
<img src={type.img} alt="" />
|
||||
<div className="space-y-1 2xl:space-y-[0.278vw]">
|
||||
<p className="text-s text-[#0D1922]/70">{type.area}</p>
|
||||
<p className="text-subheadline-s font-medium">{type.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user