Minor tuning

1 files changed, 35 insertions, 1 deletions

diff --git a/app/components.js b/app/components.js
index cc08fb4..c952b08 100644
--- a/app/components.js
+++ b/app/components.js
@@ -666,9 +666,9 @@ export class Modal {
 							children: house.images.slice(0, 3).map((src) => {
 								// Wrap image in anchor tag that opens in new tab
 								return Dom.a(
+									src,
 									new DomOptions({
 										attributes: {
-											href: src,
 											rel: "noopener noreferrer",
 											target: "_blank",
 										},
@@ -771,6 +771,8 @@ export class Modal {
 			{ label: "Living Area", value: `${house.livingArea} m²` },
 			{ label: "District", value: house.district },
 			{ label: "Rooms", value: house.rooms?.toString() ?? "N/A" },
+			{ label: "Lot Size", value: house.totalArea ? `${house.totalArea} m²` : "N/A" },
+			{ label: "Price per m²", value: house.pricePerSqm ? `${house.pricePerSqm} €` : "N/A" },
 		];
 		for (const { label, value } of details) {
 			const item = Dom.div(
@@ -816,6 +818,38 @@ export class Modal {
 			),
 		);
 
+		frag.appendChild(
+			Dom.div(
+				new DomOptions({
+					children: [
+						Dom.span(
+							"Official Listing",
+							new DomOptions({
+								styles: {
+									fontSize: "14px",
+									fontWeight: "bold",
+									marginBottom: "5px",
+									marginRight: "10px",
+								},
+							}),
+						),
+						Dom.a(
+							house.url,
+							new DomOptions({
+								attributes: {
+									rel: "noopener noreferrer",
+									target: "_blank",
+								},
+								styles: { color: "#0066cc", fontSize: "14px", wordBreak: "break-all" },
+							}),
+							"Oikotie",
+						),
+					],
+					styles: { marginBottom: "20px" },
+				}),
+			),
+		);
+
 		if (house.images?.length) {
 			frag.appendChild(Modal.imageSection(house));
 		}