50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import { Typography } from "@mui/material";
|
|
import Box, { BoxProps } from "@mui/material/Box";
|
|
import { styled } from "@mui/material/styles";
|
|
import React, { useState, useEffect } from "react";
|
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
import AccessTimeIcon from "@mui/icons-material/AccessTime";
|
|
|
|
const FormattedBox = styled(Box)<BoxProps>(() => ({
|
|
marginRight: 12,
|
|
}));
|
|
|
|
const Clock: React.FC = () => {
|
|
const [date, setDate] = useState<Date>(new Date());
|
|
|
|
useEffect(() => {
|
|
setInterval(() => setDate(new Date()), 30000);
|
|
}, []);
|
|
|
|
return (
|
|
<Box sx={{ display: "flex" }}>
|
|
<FormattedBox sx={{ mt: 0.5 }}>
|
|
<CalendarTodayIcon />
|
|
</FormattedBox>
|
|
<FormattedBox>
|
|
<Typography variant="h6" color="inherit">
|
|
{date.toLocaleDateString("en-GB", {
|
|
day: "numeric",
|
|
month: "short",
|
|
year: "numeric",
|
|
})}
|
|
</Typography>
|
|
</FormattedBox>
|
|
<FormattedBox sx={{ mt: 0.5 }}>
|
|
<AccessTimeIcon />
|
|
</FormattedBox>
|
|
<FormattedBox>
|
|
<Typography variant="h6" color="inherit">
|
|
{date.toLocaleString("en-US", {
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
hour12: true,
|
|
})}
|
|
</Typography>
|
|
</FormattedBox>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Clock;
|