manifold/web/components/datetime-tooltip.tsx
Sinclair Chen df858f916b
Migrate daisy tooltips to our own to fix cutoffs (#748)
* Make all tooltips use our component

* Stop mobile tooltip crop (daisy -> floating-ui)

* Show tooltip on tap for touch devices

Except tooltips on buttons

* migrate another daisy tooltip to ours

* Prevent hidden tooltip from covering click/hover
2022-08-12 12:04:23 -07:00

28 lines
658 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 { Tooltip } from './tooltip'
dayjs.extend(utc)
dayjs.extend(timezone)
dayjs.extend(advanced)
export function DateTimeTooltip(props: {
time: number
text?: string
children?: React.ReactNode
noTap?: boolean
}) {
const { time, text, noTap } = props
const formattedTime = dayjs(time).format('MMM DD, YYYY hh:mm a z')
const toolTip = text ? `${text} ${formattedTime}` : formattedTime
return (
<Tooltip text={toolTip} noTap={noTap}>
{props.children}
</Tooltip>
)
}