From eb03462599f3ca06f765802e877f7249da0876bc Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Thu, 4 Jan 2024 14:50:55 +0530
Subject: [PATCH] chore: first scratch at creating something

---
 frontend/src/utils/DisplayDate.tsx | 36 ++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 frontend/src/utils/DisplayDate.tsx

diff --git a/frontend/src/utils/DisplayDate.tsx b/frontend/src/utils/DisplayDate.tsx
new file mode 100644
index 0000000000..13c42c06bc
--- /dev/null
+++ b/frontend/src/utils/DisplayDate.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { useLocationSettings } from 'hooks/useLocationSettings';
+import {
+    formatDateHM,
+    formatDateYMD,
+    formatDateYMDHM,
+    formatDateYMDHMS,
+} from './formatDate';
+
+type DateDisplayProps = {
+    displayFormat: 'YMD' | 'HM' | 'YMDHMS' | 'YMDHM';
+    date: Date | string;
+};
+
+// You are responsible for ensuring that the string / number you pass in is valid.
+export const DisplayDate: FC<DateDisplayProps> = ({ displayFormat, date }) => {
+    const { locationSettings } = useLocationSettings();
+    const locale = locationSettings?.locale;
+
+    const format = (() => {
+        switch (displayFormat) {
+            case 'HM':
+                return formatDateHM;
+            case 'YMD':
+                return formatDateYMD;
+            case 'YMDHM':
+                return formatDateYMDHM;
+            case 'YMDHMS':
+                return formatDateYMDHMS;
+        }
+    })();
+
+    const formattedDate = format(date, locale);
+
+    return <time>{formattedDate}</time>;
+};