83 lines
2.7 KiB
Plaintext
83 lines
2.7 KiB
Plaintext
---
|
|
import { cn } from '../lib/cn'
|
|
import { timeAgo } from '../lib/timeAgo'
|
|
|
|
import type { Polymorphic } from 'astro/types'
|
|
|
|
type Props<Tag extends 'div' | 'li' | 'p' | 'span' = 'span'> = Polymorphic<{
|
|
as: Tag
|
|
start: Date
|
|
end?: Date | null
|
|
classNames?: {
|
|
fadedWords?: string
|
|
}
|
|
now?: Date
|
|
}>
|
|
|
|
const { start, end = null, classNames = {}, now = new Date(), as: Tag = 'span', ...htmlProps } = Astro.props
|
|
|
|
const actualEndedAt = end ?? now
|
|
const startedAtFormatted = timeAgo.format(start, 'twitter-minute-now')
|
|
const isUpcoming = now < start
|
|
const isOngoing = now >= start && (!end || now <= end)
|
|
const endedAtFormatted = timeAgo.format(actualEndedAt, 'twitter-minute-now')
|
|
const isOneTimeEvent = start === actualEndedAt || startedAtFormatted === endedAtFormatted
|
|
---
|
|
|
|
<Tag {...htmlProps}>
|
|
{
|
|
!end ? (
|
|
isUpcoming ? (
|
|
<>
|
|
Upcoming
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>on</span>
|
|
<time class="whitespace-nowrap">{startedAtFormatted}</time>
|
|
</>
|
|
) : (
|
|
<>
|
|
Ongoing
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>since</span>
|
|
<time class="whitespace-nowrap">{startedAtFormatted}</time>
|
|
</>
|
|
)
|
|
) : isOneTimeEvent ? (
|
|
isUpcoming ? (
|
|
<>
|
|
Upcoming
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>on</span>
|
|
<time class="whitespace-nowrap">{startedAtFormatted}</time>
|
|
</>
|
|
) : (
|
|
<time class="whitespace-nowrap">{startedAtFormatted}</time>
|
|
)
|
|
) : (
|
|
<>
|
|
{isUpcoming ? (
|
|
<>
|
|
Upcoming
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>from</span>
|
|
<time class="whitespace-nowrap">{startedAtFormatted}</time>
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>to</span>
|
|
<time class="whitespace-nowrap">{endedAtFormatted}</time>
|
|
</>
|
|
) : isOngoing ? (
|
|
<>
|
|
Ongoing
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>since</span>
|
|
<time class="whitespace-nowrap">{startedAtFormatted}</time>
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>to</span>
|
|
<time class="whitespace-nowrap">{endedAtFormatted}</time>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>From</span>
|
|
<time class="whitespace-nowrap">{startedAtFormatted}</time>
|
|
<span class={cn('text-current/50', classNames.fadedWords)}>to</span>
|
|
<time class="whitespace-nowrap">{endedAtFormatted}</time>
|
|
</>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
</Tag>
|