Refactor ProjectSelect and UnitTypeCard components; enhance styling and add new unit types to projects data

This commit is contained in:
2025-04-28 16:51:05 +05:00
parent d43ef88e15
commit a44f2fbb98
18 changed files with 263 additions and 63 deletions
+19 -13
View File
@@ -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>
);
}