manifold/web/components/datetime-tooltip.tsx
Austin Chen 76c4cd6d68
Render timestamps client-side to fix timezone (#58)
* Render timestamps client-side to fix timezone

* Fix compilation error
2022-03-02 23:51:58 -08:00

35 lines
861 B
TypeScript

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
import advanced from 'dayjs/plugin/advancedFormat'
import { ClientRender } from './client-render'
dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.extend(advanced)
export function DateTimeTooltip(props: {
time: number
text?: string
children?: React.ReactNode
}) {
const { time, text } = props
const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z')
const toolTip = text ? `${text} ${formattedTime}` : formattedTime
return (
<>
<ClientRender>
<span
className="tooltip hidden cursor-default sm:inline-block"
data-tip={toolTip}
>
{props.children}
</span>
</ClientRender>
<span className="whitespace-nowrap sm:hidden">{props.children}</span>
</>
)
}