From cb78e3fc62eaf964246a77a62f5eb1b219092825 Mon Sep 17 00:00:00 2001
From: Mystjerne <danaliewqie@gmail.com>
Date: Tue, 28 Nov 2023 09:54:39 +0800
Subject: [PATCH] completed basic world clock

---
 src/App.jsx   |  8 ++++++++
 src/Clock.jsx | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/Clock.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 9d138e2..d193ff6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,6 @@
+import React, { useState, useEffect } from "react";
 import logo from "/logo.png";
+import Clock from "./Clock";
 import "./App.css";
 
 function App() {
@@ -12,6 +14,12 @@ function App() {
         <p>
           Edit <code>src/App.jsx</code> and save to test HMR
         </p>
+        <p>
+          <p>Timezone: Asia/Singapore</p>
+          <Clock timeZone="Asia/Singapore" />
+          <p>Timezone: Europe/London</p>
+          <Clock timeZone="Europe/London" />
+        </p>
       </div>
     </>
   );
diff --git a/src/Clock.jsx b/src/Clock.jsx
new file mode 100644
index 0000000..abca1c4
--- /dev/null
+++ b/src/Clock.jsx
@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from "react";
+
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+
+  useEffect(() => {
+    const makeTimeGoUp = setInterval(handleDate, 1000);
+    return () => clearInterval(makeTimeGoUp);
+  }, []);
+
+  const handleDate = () => setDate(() => new Date());
+
+  return (
+    <>
+      <p>{date.toLocaleString("en-GB", { timeZone: props.timeZone })}</p>
+    </>
+  );
+}
+export default Clock;