diff --git a/src/components/dev/DevTimeStamp/DevTimeStamp.scss b/src/components/dev/DevTimeStamp/DevTimeStamp.scss new file mode 100644 index 00000000..06410498 --- /dev/null +++ b/src/components/dev/DevTimeStamp/DevTimeStamp.scss @@ -0,0 +1,15 @@ +.DevTimeStamp { + color: #888888; + position: fixed; + width: 100%; + top: 0.5em; + font-size: 11px; + pointer-events: none; + z-index: 999; + + span { + display: block; + width: fit-content; + margin: auto; + } +} diff --git a/src/components/dev/DevTimeStamp/index.tsx b/src/components/dev/DevTimeStamp/index.tsx new file mode 100644 index 00000000..4c02c800 --- /dev/null +++ b/src/components/dev/DevTimeStamp/index.tsx @@ -0,0 +1,51 @@ +import { useContext, useEffect, useState } from 'react'; +import './DevTimeStamp.scss' +import SettingsContext from '@/contexts/SettingsContext/context'; + +const getTimeStampFormatted = (rawTimestamp: number) => { + + const timestamp = new Date(rawTimestamp) + + const year = timestamp.getFullYear(); + + // Months are zero-indexed + const month = (timestamp.getMonth() + 1).toString().padStart(2, '0'); + const day = timestamp.getDate().toString().padStart(2, '0'); + const hours = timestamp.getHours().toString().padStart(2, '0'); + const minutes = timestamp.getMinutes().toString().padStart(2, '0'); + const seconds = timestamp.getSeconds().toString().padStart(2, '0'); + + const timeZone = new Intl.DateTimeFormat('en', { timeZoneName: 'short' }).formatToParts(timestamp).find(part => part.type === 'timeZoneName')!.value; + + const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${timeZone}`; + + return formattedDateTime + +} + +const DevTimeStamp = () => { + const [timestamp, setTimestamp] = useState(Date.now()) + const {isDevModeEnabled} = useContext(SettingsContext) + + useEffect(() => { + if(isDevModeEnabled) { + const intervalId = setInterval(() => { + setTimestamp(Date.now()) + }, 250) + + return () => clearInterval(intervalId) + } + }, [setTimestamp, isDevModeEnabled]) + + if (!isDevModeEnabled) { + return null; + } + + return ( +