From 05ee3c64ec1872144ab519eca21cde01c751592d Mon Sep 17 00:00:00 2001
From: phyllispp <hongyu.pann@gmail.com>
Date: Thu, 23 Nov 2023 17:04:53 -0500
Subject: [PATCH] world clock exercise completed

---
 src/App.jsx   | 11 +++++------
 src/Clock.jsx | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 src/Clock.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 9d138e2..f2d87f3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,8 @@
 import logo from "/logo.png";
 import "./App.css";
+import Clock from "./Clock.jsx";
 
-function App() {
+export default function App() {
   return (
     <>
       <div>
@@ -9,12 +10,10 @@ function App() {
       </div>
       <h1>World Clock</h1>
       <div className="card">
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
+        <Clock timeZone="Asia/Singapore" />
+        <Clock timeZone="America/New_York" />
+        <Clock timeZone="Asia/Shanghai" />
       </div>
     </>
   );
 }
-
-export default App;
diff --git a/src/Clock.jsx b/src/Clock.jsx
new file mode 100644
index 0000000..e754a41
--- /dev/null
+++ b/src/Clock.jsx
@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+
+export default function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    const timerId = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+
+    return () => {
+      clearInterval(timerId);
+    };
+  });
+  return (
+    <>
+      <p>
+        {props.timeZone}:
+        {date.toLocaleString("en-GB", { timeZone: `${props.timeZone}` })}
+      </p>
+    </>
+  );
+}