From adc93a6012978b483821191a2cec795723dde1b7 Mon Sep 17 00:00:00 2001
From: Khalim Conn-Kowlessar <kconnkowlessar@gmail.com>
Date: Tue, 25 Jul 2023 14:33:46 +0100
Subject: [PATCH] formatting date in property information

---
 .../building-passport/[propertyId]/page.tsx     | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
index 7a70db87..19235385 100644
--- a/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
+++ b/src/app/portfolio/[slug]/building-passport/[propertyId]/page.tsx
@@ -8,6 +8,21 @@ import {
   UserGroupIcon,
 } from "@heroicons/react/24/solid";
 
+function formatDateTime(dateTimeString: string): string {
+  // Create a new Date object
+  const dateTime = new Date(dateTimeString);
+
+  // Get the various parts of the date
+  const options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  };
+  return dateTime.toLocaleDateString("en-GB", options);
+}
+
 function EpcCard({ epcRating }: { epcRating: string }) {
   return (
     <div className="flex flex-col items-center p-8 shadow rounded-md max-w-xl mx-auto justify-start text-gray-100 bg-brandblue">
@@ -44,7 +59,7 @@ export default function BuildingPassportHome() {
           <div className="flex items-center space-x-2 mb-2">
             <CalendarIcon className="h-5 w-5 text-gray-400" />
             <div className="text-gray-500">Building Passport Created At:</div>
-            <div>{propertyMeta.createdAt}</div>
+            <div>{formatDateTime(propertyMeta.createdAt)}</div>
           </div>
           <div className="flex items-center space-x-2 mb-2">
             <HomeIcon className="h-5 w-5 text-gray-400" />