jollywhoppers.com
Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
samuel.fm
1import React from 'react'
2import {View} from 'react-native'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import {Trans} from '@lingui/react/macro'
6import {subDays} from 'date-fns'
7
8import {atoms as a, useTheme} from '#/alf'
9import {Text} from '../Typography'
10import {localDateString} from './util'
11
12const timeFormatter = new Intl.DateTimeFormat(undefined, {
13 hour: 'numeric',
14 minute: 'numeric',
15})
16const weekdayFormatter = new Intl.DateTimeFormat(undefined, {
17 weekday: 'long',
18})
19const longDateFormatter = new Intl.DateTimeFormat(undefined, {
20 weekday: 'short',
21 month: 'long',
22 day: 'numeric',
23})
24const longDateFormatterWithYear = new Intl.DateTimeFormat(undefined, {
25 weekday: 'short',
26 month: 'long',
27 day: 'numeric',
28 year: 'numeric',
29})
30
31let DateDivider = ({date: dateStr}: {date: string}): React.ReactNode => {
32 const {_} = useLingui()
33 const t = useTheme()
34
35 let date: string
36 const time = timeFormatter.format(new Date(dateStr))
37
38 const timestamp = new Date(dateStr)
39
40 const today = new Date()
41 const yesterday = subDays(today, 1)
42 const oneWeekAgo = subDays(today, 7)
43
44 if (localDateString(today) === localDateString(timestamp)) {
45 date = _(msg`Today`)
46 } else if (localDateString(yesterday) === localDateString(timestamp)) {
47 date = _(msg`Yesterday`)
48 } else {
49 if (timestamp < oneWeekAgo) {
50 if (timestamp.getFullYear() === today.getFullYear()) {
51 date = longDateFormatter.format(timestamp)
52 } else {
53 date = longDateFormatterWithYear.format(timestamp)
54 }
55 } else {
56 date = weekdayFormatter.format(timestamp)
57 }
58 }
59
60 return (
61 <View style={[a.w_full, a.my_lg]}>
62 <Text
63 style={[
64 a.text_xs,
65 a.text_center,
66 t.atoms.bg,
67 t.atoms.text_contrast_medium,
68 a.px_md,
69 ]}>
70 <Trans>
71 <Text
72 style={[a.text_xs, t.atoms.text_contrast_medium, a.font_semi_bold]}>
73 {date}
74 </Text>{' '}
75 at {time}
76 </Trans>
77 </Text>
78 </View>
79 )
80}
81DateDivider = React.memo(DateDivider)
82export {DateDivider}