feat: clock face

Author: wkylin

src/components/stateless/ClockFace/index.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react'
+
+const ClockFace = () => {
+  const [hours, setHours] = useState('00')
+  const [minutes, setMinutes] = useState('00')
+  const [seconds, setSeconds] = useState('00')
+  const [amPm, setAmPm] = useState('AM')
+
+  useEffect(() => {
+    const updateClock = () => {
+      const currentTime = new Date()
+      let hrs = currentTime.getHours()
+      const mins = currentTime.getMinutes()
+      const secs = currentTime.getSeconds()
+
+      setHours(`${hrs < 10 ? '0' : ''}${hrs > 12 ? hrs - 12 : hrs}`)
+      setMinutes(`${mins < 10 ? '0' : ''}${mins}`)
+      setSeconds(`${secs < 10 ? '0' : ''}${secs}`)
+      setAmPm(hrs < 12 ? 'AM' : 'PM')
+    }
+
+    updateClock()
+    const interval = setInterval(updateClock, 1000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return (
+    <div className="flex items-center justify-center">
+      <div className="flex items-center justify-center pr-[10px]">
+        <span className="text-center text-4xl font-bold">
+          {hours}
+          <span className="font-mono text-4xl font-bold">:</span>
+        </span>
+        <span className="text-center text-4xl font-bold">
+          {minutes}
+          <span className="font-mono text-4xl font-bold">:</span>
+        </span>
+        <span className="text-center text-4xl font-bold">{seconds}</span>
+        <span className="mt-5 ml-3 font-sans text-xl font-bold">{amPm}</span>
+      </div>
+    </div>
+  )
+}
+
+export default ClockFace

src/pages/layout/proContent/index.jsx

@@ -3,7 +3,8 @@ import { Layout, FloatButton, theme, Space } from 'antd'
 import { useLocation } from 'react-router-dom'
 import { VerticalAlignTopOutlined } from '@ant-design/icons'
 import { getKeyName } from '@utils/publicFn'
-import { useProTabContext } from '@src/components/hooks/proTabsContext'
+import { useProTabContext } from '@hooks/proTabsContext'
+import ClockFace from '@stateless/ClockFace'
 import ProBreadcrumb from './breadcrumb'
 import ProTabs from '../proTabs'
 import styles from './index.module.less'
@@ -47,7 +48,10 @@ const ProContent = () => {
   return (
     <Layout className={styles.layout} id="fullScreen">
       <Header className="layout-header" style={{ background: colorBgLayout }}>
-        <ProBreadcrumb />
+        <section className="flex items-center justify-between">
+          <ProBreadcrumb />
+          <ClockFace />
+        </section>
       </Header>
       <Content className="layout-content" id="fullScreenContent" style={{ background: colorBgContainer }}>
         <ProTabs panesItem={panesItem} tabActiveKey={tabActiveKey} />