48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
const units = [
|
||
{ id: 1, title: "Entrance", area: "3.25x3.10" },
|
||
{ id: 2, title: "Living Room", area: "4.10x5.10" },
|
||
{ id: 3, title: "Dining Room", area: "5.00x5.00" },
|
||
{ id: 4, title: "Store 1", area: "2.90x1.35" },
|
||
{ id: 5, title: "Men’s Majlas", area: "5.00x7.00" },
|
||
{ id: 6, title: "Bathroom 1", area: "1.70x2.00" },
|
||
{ id: 7, title: "Washbasins", area: "1.80x2.00" },
|
||
{ id: 8, title: "Guest Bedroom", area: "4.10x4.60" },
|
||
{ id: 9, title: "Bathroom 2", area: "2.70x2.00" },
|
||
{ id: 10, title: "Kitchen", area: "5.00x4.00" },
|
||
{ id: 11, title: "Bathroom 3", area: "1.50x2.50" },
|
||
{ id: 12, title: "Store 2", area: "2.20x1.30" },
|
||
{ id: 13, title: "Laundry Room", area: "2.20x1.50" },
|
||
{ id: 14, title: "Domestic Worker Room", area: "3.50x3.00" },
|
||
{ id: 15, title: "Domestic Worker Bathroom", area: "1.50x2.00" },
|
||
];
|
||
|
||
const UnitList = () => {
|
||
return (
|
||
<div className="px-8 py-6">
|
||
<div className="font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4 ">
|
||
<div>№</div>
|
||
<div className="flex justify-between w-full">
|
||
<div>Unit</div>
|
||
<div>Area (m)</div>
|
||
</div>
|
||
</div>
|
||
{units.map((unit, index) => (
|
||
<div
|
||
key={unit.id}
|
||
className={`font-medium text-lg flex w-full gap-[18px] py-2 pr-6 pl-4 ${
|
||
index % 2 === 0 ? "bg-[#F3F2F0] rounded-lg" : ""
|
||
}`}
|
||
>
|
||
<div>{index + 1}</div>
|
||
<div className="flex justify-between w-full">
|
||
<div>{unit.title}</div>
|
||
<div>{unit.area}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UnitList;
|