48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import type { Reaction } from '../../../graphql/schema/core.gen'
|
|
|
|
import { clsx } from 'clsx'
|
|
import { Show } from 'solid-js'
|
|
|
|
import { useLocalize } from '../../../context/localize'
|
|
import { Icon } from '../../_shared/Icon'
|
|
|
|
import styles from './CommentDate.module.scss'
|
|
|
|
type Props = {
|
|
comment: Reaction
|
|
isShort?: boolean
|
|
isLastInRow?: boolean
|
|
showOnHover?: boolean
|
|
}
|
|
|
|
export const CommentDate = (props: Props) => {
|
|
const { t, formatDate } = useLocalize()
|
|
|
|
const formattedDate = (date: number) => {
|
|
const formatDateOptions: Intl.DateTimeFormatOptions = props.isShort
|
|
? { month: 'long', day: 'numeric', year: 'numeric' }
|
|
: { hour: 'numeric', minute: 'numeric' }
|
|
|
|
return formatDate(new Date(date), formatDateOptions)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
class={clsx(styles.commentDates, {
|
|
[styles.commentDatesLastInRow]: props.isLastInRow,
|
|
[styles.showOnHover]: props.showOnHover
|
|
})}
|
|
>
|
|
<time class={styles.date}>{formattedDate(props.comment.created_at * 1000)}</time>
|
|
<Show when={props.comment.updated_at}>
|
|
<time class={styles.date}>
|
|
<Icon name="edit" class={styles.icon} />
|
|
<span class={styles.text}>
|
|
{t('Edited')} {formattedDate(props.comment.updated_at * 1000)}
|
|
</span>
|
|
</time>
|
|
</Show>
|
|
</div>
|
|
)
|
|
}
|