diff --git a/website/src/components/DateDisplay.tsx b/website/src/components/DateDisplay.tsx new file mode 100644 index 00000000..95d7996c --- /dev/null +++ b/website/src/components/DateDisplay.tsx @@ -0,0 +1,25 @@ +import addMinutes from 'date-fns/addMinutes'; +import format from 'date-fns/format'; +import parseISO from 'date-fns/parseISO'; +import { useEffect, useState } from 'react'; + +function formatDate(date: Date, dateFormat: string) { + return format(addMinutes(date, date.getTimezoneOffset()), dateFormat); +} + +interface DateDisplayProps { + date: string; + format: string; +} + +const DateDisplay = ({ date: dateString, format: dateFormat }: DateDisplayProps) => { + const [date, setDate] = useState(`${formatDate(parseISO(dateString), dateFormat)} UTC`); + + useEffect(() => { + setDate(format(parseISO(dateString), dateFormat)); + }, [dateFormat, dateString]); + + return <>{date}; +}; + +export default DateDisplay; diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 91c5e109..145bb8c6 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -5,10 +5,9 @@ import CardContent from '@mui/material/CardContent'; import Chip from '@mui/material/Chip'; import { styled, useTheme } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; -import format from 'date-fns/format'; -import parseISO from 'date-fns/parseISO'; import Link from 'next/link'; +import DateDisplay from '../components/DateDisplay'; import Container from '../components/layout/Container'; import Page from '../components/layout/Page'; import config from '../lib/config'; @@ -341,7 +340,7 @@ const Home = ({ docsGroups }: DocsMenuProps) => { > <> - {format(parseISO(release.date), 'MMMM dd, yyyy')} +