added Time settings

settings/settings.js

@@ -112,7 +112,15 @@ const template = {
     ),
     pagination: new types.Switch(false),
     arrows: new types.Switch(true),
-    drag: new types.Switch(true)
+    drag: new types.Switch(true),
+    time: {
+      fontSize: new types.Range(
+        1,
+        { min: 0.1, max: 10, step: 0.1 }, 
+        { format: '{@}em' }
+      ),
+      format: new types.Input('h:MM')
+    }
   }
 }
 

src/components/Time/Time.jsx

@@ -1,8 +1,15 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
+import { SettingsContext } from '../../contexts/Settings'
 import dateFormat from 'dateformat'
 import classes from './Time.module.css'
 
 function Time() {
+  /* settings */
+  const settings = useContext(SettingsContext)
+
+  const fontSize = settings.menu.time.fontSize
+  const format = settings.menu.time.format
+
   const [time, setTime] = useState(new Date())
 
   useEffect(() => {
@@ -15,9 +22,13 @@ function Time() {
     return () => clearTimeout(window[timerGlobalRef])
   }, [])
 
+  const variables = {
+    '--font-size': fontSize + 'em'
+  }
+
   return (
-    <div className={classes['time']}>
-      {dateFormat(time, 'h:MM')}
+    <div className={classes['time']} style={variables}>
+      {dateFormat(time, format)}
     </div>
   )
 }

src/components/Time/Time.module.css

@@ -1,3 +1,4 @@
 .time {
   color: var(--time);
+  font-size: var(--font-size);
 }