add tailwind to materialUI and add stopwatch feature

package.json

@@ -96,6 +96,7 @@
         "electron-debug": "^3.2.0",
         "electron-log": "^4.4.8",
         "electron-updater": "^6.1.4",
+        "lucide-react": "^0.303.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.16.0"

src/components/timing.tsx

@@ -1,4 +1,9 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable max-classes-per-file */
+import { Pause, PlayArrow } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
 import React from 'react';
+import 'tailwindcss/tailwind.css';
 
 type ClockState = {
     date: Date;
@@ -38,16 +43,95 @@ class Clock extends React.Component<{}, ClockState> {
     }
 }
 
+interface StopwatchState {
+    time: number;
+    isRunning: boolean;
+}
+
+class Stopwatch extends React.Component<{}, StopwatchState> {
+    interval: number | null = null;
+
+    constructor(props: {}) {
+        super(props);
+        this.state = {
+            time: 0,
+            isRunning: false,
+        };
+    }
+
+    componentDidUpdate(prevProps: {}, prevState: StopwatchState) {
+        if (this.state.isRunning && !prevState.isRunning) {
+            this.startTimer();
+        } else if (!this.state.isRunning && prevState.isRunning) {
+            this.stopTimer();
+        }
+    }
+
+    componentWillUnmount() {
+        this.stopTimer();
+    }
+
+    startTimer = () => {
+        this.interval = window.setInterval(() => {
+            this.setState((prevState) => ({ time: prevState.time + 1000 }));
+        }, 1000);
+    };
+
+    stopTimer = () => {
+        if (this.interval !== null) {
+            window.clearInterval(this.interval);
+            this.interval = null;
+        }
+    };
+
+    handleStartStop = () => {
+        this.setState((prevState) => ({ isRunning: !prevState.isRunning }));
+    };
+
+    // eslint-disable-next-line class-methods-use-this
+    formatTime = (time: number) => {
+        const hours = Math.floor(time / 3600000);
+        const minutes = Math.floor((time - hours * 3600000) / 60000);
+        const seconds = Math.floor(
+            (time - hours * 3600000 - minutes * 60000) / 1000,
+        );
+
+        return `${hours.toString().padStart(2, '0')}:${minutes
+            .toString()
+            .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    };
+
+    render() {
+        const { time, isRunning } = this.state;
+
+        return (
+            <div className="flex flex-row">
+                <div className="text-4xl font-semibold mb-4">
+                    {this.formatTime(time)}
+                </div>
+                <IconButton
+                    aria-label="start-stop"
+                    onClick={this.handleStartStop}
+                    className="text-lightGray h-9 pl-2"
+                >
+                    {isRunning ? <Pause /> : <PlayArrow />}
+                </IconButton>
+            </div>
+        );
+    }
+}
+
 function Timers() {
     return (
         <div className="flex flex-row pt-2 gap-x-6">
             <div className="flex flex-col">
                 <p className="font-bold text-md">Current Time</p>
                 <Clock />
             </div>
+
             <div className="flex flex-col pl-5">
                 <p className="font-bold text-md">Mission Elapsed Time</p>
-                <h1 className="font-bold text-4xl italic underline">temp</h1>
+                <Stopwatch />
             </div>
         </div>
     );

src/renderer/App.css

@@ -15,4 +15,6 @@ body:root {
         1px 1px 0 #000;
 }
 
+
 /* HTML Color Grey Codes: https://www.w3schools.com/colors/colors_shades.asp */
+

tailwind.config.js

@@ -1,8 +1,11 @@
 module.exports = {
+    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    important: '#root',
     theme: {
         extend: {
             colors: {
                 darkGray: '#202020',
+                lightGray: '#808080',
             },
         },
     },