From 3c7f0e0dc1a021fe304645bbcdc1bd37776d0f8c Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Fri, 12 Jan 2024 23:08:52 +0000
Subject: [PATCH] Show arrival date in ambassador cards

---
 src/components/ambassadorCard/AmbassadorCard.tsx         | 9 +++++++++
 src/components/ambassadorCard/ambassadorCard.module.scss | 4 ++++
 src/utils/dateManager.ts                                 | 6 +++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/ambassadorCard/AmbassadorCard.tsx b/src/components/ambassadorCard/AmbassadorCard.tsx
index 3a4b78f3..e00056a0 100644
--- a/src/components/ambassadorCard/AmbassadorCard.tsx
+++ b/src/components/ambassadorCard/AmbassadorCard.tsx
@@ -141,6 +141,15 @@ export default function AmbassadorCard(props: AmbassadorCardProps) {
           <p>{ambassador.native.text}</p>
         </div>
 
+        <div>
+          <h3>Arrived at Alveus</h3>
+          <p>
+            {ambassador.arrival
+              ? formatDate(ambassador.arrival, false)
+              : "Unknown"}
+          </p>
+        </div>
+
         <div className={styles.site}>
           <p>
             Learn more about {ambassador.name} on the{" "}
diff --git a/src/components/ambassadorCard/ambassadorCard.module.scss b/src/components/ambassadorCard/ambassadorCard.module.scss
index 94868609..4fa8d84d 100644
--- a/src/components/ambassadorCard/ambassadorCard.module.scss
+++ b/src/components/ambassadorCard/ambassadorCard.module.scss
@@ -148,6 +148,10 @@
       display: flex;
       flex-wrap: wrap;
       gap: 0.25rem 1.5rem;
+
+      > * {
+        margin-right: auto;
+      }
     }
 
     .info {
diff --git a/src/utils/dateManager.ts b/src/utils/dateManager.ts
index aba5612e..33d5dc1b 100644
--- a/src/utils/dateManager.ts
+++ b/src/utils/dateManager.ts
@@ -46,7 +46,7 @@ export function calculateAge(dateOfBirth: string): string {
  * @param date date in the format YYYY-MM-DD or YYYY-MM or YYYY
  * @returns a string of the date in the format Month DD, YYYY or Month YYYY or YYYY
  */
-export function formatDate(date: string): string {
+export function formatDate(date: string, approximate = true): string {
   const dateArray = date.split("-");
   let day = dateArray[2];
   let month = dateArray[1];
@@ -60,9 +60,9 @@ export function formatDate(date: string): string {
   }
 
   if (day && month && year) return `${month} ${day}, ${year}`;
-  else if (month && year) return `~${month}, ${year}`;
+  else if (month && year) return `${approximate ? "~" : ""}${month}, ${year}`;
 
-  return `~${year}`;
+  return `${approximate ? "~" : ""}${year}`;
 }
 
 /**