2022-01-16 09:16:15 +00:00
|
|
|
import dayjs from 'dayjs'
|
|
|
|
import utc from 'dayjs/plugin/utc'
|
|
|
|
import timezone from 'dayjs/plugin/timezone'
|
|
|
|
import advanced from 'dayjs/plugin/advancedFormat'
|
|
|
|
|
|
|
|
dayjs.extend(utc)
|
|
|
|
dayjs.extend(timezone)
|
|
|
|
dayjs.extend(advanced)
|
|
|
|
|
|
|
|
export function DateTimeTooltip(props: {
|
|
|
|
time: number
|
2022-01-19 22:01:54 +00:00
|
|
|
text?: string
|
2022-01-16 09:16:15 +00:00
|
|
|
children?: React.ReactNode
|
|
|
|
}) {
|
2022-01-19 22:01:54 +00:00
|
|
|
const { time, text } = props
|
|
|
|
|
2022-02-22 20:54:58 +00:00
|
|
|
const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a')
|
2022-01-19 22:01:54 +00:00
|
|
|
const toolTip = text ? `${text} ${formattedTime}` : formattedTime
|
|
|
|
|
2022-01-16 09:16:15 +00:00
|
|
|
return (
|
2022-01-18 00:08:50 +00:00
|
|
|
<>
|
|
|
|
<span
|
2022-02-11 18:40:22 +00:00
|
|
|
className="tooltip hidden cursor-default sm:inline-block"
|
2022-01-19 22:01:54 +00:00
|
|
|
data-tip={toolTip}
|
2022-01-18 00:08:50 +00:00
|
|
|
>
|
|
|
|
{props.children}
|
|
|
|
</span>
|
2022-02-21 04:04:00 +00:00
|
|
|
<span className="sm:hidden whitespace-nowrap">{props.children}</span>
|
2022-01-18 00:08:50 +00:00
|
|
|
</>
|
2022-01-16 09:16:15 +00:00
|
|
|
)
|
|
|
|
}
|