I'm currently working on a clock widget in NextJS using SVG for scalability on large screens. The issue I'm facing is that the numbers on the clock aren't always the same width, causing the widget to shift slightly left or right every second. How can I fix this so that the widget stays centered?
Below is the code snippet:
// ** React Imports
import {ReactNode, useEffect, useState} from 'react'
// ** MUI Components
import { styled } from '@mui/material/styles'
// ** Layout Import
import BlankLayout from 'src/@core/layouts/BlankLayout'
// ** Library Import
import moment from 'moment'
interface PersonalizedClockProps {
darkMode: boolean
showSeconds: boolean
}
const PersonalizedClockStyled = styled('div')(({ theme }) => ({
display: 'block',
alignItems: 'center',
justifyContent: 'center',
height: '100vh',
width: '100vw',
overflow: 'hidden',
'& svg': {
width: '100%',
height: '100%'
},
'& #time': {
fontSize: '9rem',
fontWeight: 500
}
}))
const PersonalizedClock = (props: PersonalizedClockProps) => {
const { darkMode, showSeconds } = props;
const format = 'HH:mm:ss';
const [time, setTime] = useState(moment().format(format));
// update time every second
useEffect(() => {
const interval = setInterval(() => {
setTime(moment().format(format));
}, 1000);
return () => clearInterval(interval);
}, [format]);
return (
<PersonalizedClockStyled>
<svg viewBox="0 0 560 300">
<text id="time" x="50%" y="50%" className="classes.text" textAnchor="middle" dominantBaseline="central">
{time}
</text>
</svg>
</PersonalizedClockStyled>
);
}
PersonalizedClock.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>
export default PersonalizedClock;
I have attempted changing the positioning to absolute and wrapping it in an outside div with absolute positioning but it did not resolve the issue.