From c01b6347c0426730b93760b5a1cd61c4c37a1ab2 Mon Sep 17 00:00:00 2001
From: "cyril.tsui" <cyril.tsui@2fi-solutions.com.hk>
Date: Tue, 14 May 2024 16:00:07 +0800
Subject: [PATCH] add clock

---
 src/components/Breadcrumb/Breadcrumb.tsx | 63 ++++++++++++++----------
 src/components/Breadcrumb/Clock.tsx      | 32 ++++++++++++
 2 files changed, 69 insertions(+), 26 deletions(-)
 create mode 100644 src/components/Breadcrumb/Clock.tsx

diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
index 65809dc..e9ff21a 100644
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.tsx
@@ -6,6 +6,9 @@ import Link from "next/link";
 import MUILink from "@mui/material/Link";
 import { usePathname } from "next/navigation";
 import { useTranslation } from "react-i18next";
+import Clock from "./Clock";
+import { Grid } from "@mui/material";
+import { I18nProvider } from "@/i18n";
 
 const pathToLabelMap: { [path: string]: string } = {
   "": "Overview",
@@ -39,34 +42,42 @@ const Breadcrumb = () => {
 
   // const { t } = useTranslation("customer");
 
+
   return (
-    <Breadcrumbs>
-      {segments.map((segment, index) => {
-        const href = segments.slice(0, index + 1).join("/");
-        const label = pathToLabelMap[href] || segment;
+    <Grid container>
+      <Grid item xs={6}>
+        <Breadcrumbs>
+          {segments.map((segment, index) => {
+            const href = segments.slice(0, index + 1).join("/");
+            const label = pathToLabelMap[href] || segment;
 
-        if (index === segments.length - 1) {
-          return (
-            <Typography key={index} color="text.primary">
-              {label}
-              {/* {t(label)} */}
-            </Typography>
-          );
-        } else {
-          return (
-            <MUILink
-              underline="hover"
-              color="inherit"
-              key={index}
-              component={Link}
-              href={href || "/"}
-            >
-              {label}
-            </MUILink>
-          );
-        }
-      })}
-    </Breadcrumbs>
+            if (index === segments.length - 1) {
+              return (
+                <Typography key={index} color="text.primary">
+                  {label}
+                  {/* {t(label)} */}
+                </Typography>
+              );
+            } else {
+              return (
+                <MUILink
+                  underline="hover"
+                  color="inherit"
+                  key={index}
+                  component={Link}
+                  href={href || "/"}
+                >
+                  {label}
+                </MUILink>
+              );
+            }
+          })}
+        </Breadcrumbs>
+      </Grid>
+      <Grid item xs={6} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Clock />
+      </Grid>
+    </Grid>
   );
 };
 
diff --git a/src/components/Breadcrumb/Clock.tsx b/src/components/Breadcrumb/Clock.tsx
new file mode 100644
index 0000000..8ddf42b
--- /dev/null
+++ b/src/components/Breadcrumb/Clock.tsx
@@ -0,0 +1,32 @@
+"use client"
+import { useState, useEffect, useLayoutEffect } from 'react';
+import Typography from "@mui/material/Typography";
+import { useTranslation } from 'react-i18next';
+
+const Clock = () => {
+    const {
+        i18n: { language },
+    } = useTranslation();
+    const [currentDateTime, setCurrentDateTime] = useState(new Date());
+
+    useLayoutEffect(() => {
+        const timer = setInterval(() => {
+            setCurrentDateTime(new Date());
+        }, 1000);
+
+        return () => {
+            clearInterval(timer);
+        };
+    }, []);
+
+    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
+    const formattedDateTime = new Intl.DateTimeFormat(language, options).format(currentDateTime)
+
+    return (
+        <Typography color="text.primary" suppressHydrationWarning>
+            {formattedDateTime}
+        </Typography>
+    );
+};
+
+export default Clock;