From a7f1ffcac7638694f344e36f1601f52130061bda Mon Sep 17 00:00:00 2001
From: wenxin-p <pohwenxin@rocketmail.com>
Date: Fri, 25 Oct 2024 22:44:30 +0800
Subject: [PATCH 1/4] app.css

---
 src/App.css | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/App.css b/src/App.css
index e1c10c6..0ef653a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -37,3 +37,29 @@
 .read-the-docs {
   color: #888;
 }
+
+.table-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-cell {
+  padding: 10px; /* Add padding to cells */
+  width: 150px;
+  justify-content: center;
+  align-items: center;
+}
+
+.table-time {
+  padding: 10px; /* Add padding to cells */
+  width: 300px;
+  align-items: center;
+  justify-content: center;
+}
+.table-cell:last-child {
+  padding: 10px; /* Add padding to cells */
+  width: 300px;
+  align-items: center;
+  justify-content: center;
+}

From bde93c6ed8b5321c757050b8822f65fd7526489e Mon Sep 17 00:00:00 2001
From: wenxin-p <pohwenxin@rocketmail.com>
Date: Fri, 25 Oct 2024 22:44:47 +0800
Subject: [PATCH 2/4] app.jsx

---
 src/App.jsx | 76 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 10 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 9d138e2..84528c4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,20 +1,76 @@
 import logo from "/logo.png";
 import "./App.css";
+import { useState } from "react";
+import { useEffect } from "react";
+import Clock from "./Clock";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
 
-function App() {
+export default function App() {
   return (
-    <>
-      <div>
-        <img src={logo} className="logo" alt="Rocket logo" />
-      </div>
+    <div>
+      <img src={logo} className="logo" alt="Rocket logo" />
       <h1>World Clock</h1>
       <div className="card">
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
+        {/* This feels violative of the DIY principle, but idk how to make it into a component */}
+        <Container>
+          <Row className="table-row">
+            <Col className="table-col">City</Col>
+            <Col className="table-time">Clock</Col>
+          </Row>
+          <Row className="table-row">
+            <Col className="table-col">
+              <p>Asia/Seoul</p>
+            </Col>
+            <Col className="table-time">
+              <p>
+                <Clock timeZone="Asia/Seoul" />
+              </p>
+            </Col>
+          </Row>
+          <Row className="table-row">
+            <Col className="table-col">
+              <p>Asia/Singapore</p>
+            </Col>
+            <Col className="table-time">
+              <p>
+                <Clock timeZone="Asia/Singapore" />
+              </p>
+            </Col>
+          </Row>
+          <Row className="table-row">
+            <Col className="table-col">
+              <p>Europe/London</p>
+            </Col>
+            <Col className="table-time">
+              <p>
+                <Clock timeZone="Europe/London" />
+              </p>
+            </Col>
+          </Row>
+        </Container>
       </div>
-    </>
+    </div>
   );
 }
 
-export default App;
+// This works too but the boxes are not aligned
+// <div className="card">
+//     <Container>
+//       <Row>
+//         <Col>City</Col>
+//         <Col>Clock</Col>
+//         </Row>
+//           <Clock timeZone="Asia/Seoul" />
+//         </Row>
+//         <Row>
+//           <Clock timeZone="Asia/Singapore" />
+//         </Row>
+//         <Row>
+//           <Clock timeZone="Europe/London" />
+//         </Row>
+//       </Row>
+//     </Container>
+//   </div>
+// </div>

From 6c34aa68e5f1a30dcb8e9b55955f21c417c13ab8 Mon Sep 17 00:00:00 2001
From: wenxin-p <pohwenxin@rocketmail.com>
Date: Fri, 25 Oct 2024 22:45:12 +0800
Subject: [PATCH 3/4] clock.jsx

---
 src/Clock.jsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/Clock.jsx

diff --git a/src/Clock.jsx b/src/Clock.jsx
new file mode 100644
index 0000000..e3bd036
--- /dev/null
+++ b/src/Clock.jsx
@@ -0,0 +1,25 @@
+import { useState } from "react";
+import { useEffect } from "react";
+
+// Clock function
+export default function Clock(props) {
+  // useState allows you to add state to functional components. It essentially allows you to store and update data.
+  const [date, setDate] = useState(new Date());
+  // useEffect tells the clock to move by second. useEffect is used to perform side effects in a component.
+  useEffect(() => {
+    const timeId = setInterval(() => {
+      setDate(new Date());
+    }, 1000);
+    return () => {
+      clearInterval(timeId);
+    };
+  });
+
+  return (
+    // Add time zone label to make it clearer which time zone each clock is rendering.
+    <>
+      {/* {props.timeZone} */}
+      <p>{date.toLocaleString("en-GB", { timeZone: `${props.timeZone}` })}</p>
+    </>
+  );
+}

From f64817cb199ea0bfcfdb6d0222ac964edafd5a05 Mon Sep 17 00:00:00 2001
From: wenxin-p <pohwenxin@rocketmail.com>
Date: Fri, 25 Oct 2024 22:46:30 +0800
Subject: [PATCH 4/4] main.jsx

---
 src/main.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/main.jsx b/src/main.jsx
index ac77a71..3be7432 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,5 +1,6 @@
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./index.css";
+// import "bootstrap/dist/css/bootstrap.min.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(<App />);