diff --git a/src/components/Post/Embed/ExternalEmbed/PublicationEmbed/MetaRow.tsx b/src/components/Post/Embed/ExternalEmbed/PublicationEmbed/MetaRow.tsx new file mode 100644 index 0000000000..8c7330aaf2 --- /dev/null +++ b/src/components/Post/Embed/ExternalEmbed/PublicationEmbed/MetaRow.tsx @@ -0,0 +1,108 @@ +import {View} from 'react-native' +import {plural} from '@lingui/core/macro' +import {Trans, useLingui} from '@lingui/react/macro' + +import {atoms as a, useTheme} from '#/alf' +import {Clock_Stroke2_Corner0_Rounded as Clock} from '#/components/icons/Clock' +import {Leaf_Stroke2_Corner0_Rounded as Leaf} from '#/components/icons/Leaf' +import {Text} from '#/components/Typography' +import {type PublicationViewExternal} from './types' + +export function MetaRow({link}: {link: PublicationViewExternal}) { + const t = useTheme() + const {i18n} = useLingui() + + // Guard against malformed dates (REG/EDGE from sweep): only render when + // `new Date(...)` produces a finite timestamp. + let formattedDate: string | undefined + if (link.createdAt) { + const parsed = new Date(link.createdAt) + if (!Number.isNaN(parsed.getTime())) { + formattedDate = i18n.date(parsed, {dateStyle: 'medium'}) + } + } + + return ( + + + {formattedDate && ( + + {formattedDate} + + )} + {/* + TODO(APP-2160): Enable once the lexicon exposes an aggregate share + count for the external URL. `associatedBskyPost.repostCount` is the + wrong semantics (reshares of a single canonical post, not shares of + the URL). Component exists below for the moment that field lands. + */} + {/* */} + {typeof link.readingTime === 'number' && ( + + )} + + {/* + TODO(APP-2160): Enable once the lexicon exposes a host/platform name + on `viewExternalSource` (e.g. "Leaflet"). Component exists below for + the moment that field lands. + */} + {/* */} + + ) +} + +function ReadingTimeChip({minutes}: {minutes: number}) { + const t = useTheme() + return ( + + + + + {plural(minutes, {one: '# min', other: '# min'})} + + + + ) +} + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function SharesChip({count}: {count: number}) { + const t = useTheme() + return ( + + + + {plural(count, {one: '# share', other: '# shares'})} + + + + ) +} + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +function HostedByChip({name}: {name: string}) { + const t = useTheme() + return ( + + + + + Hosted by {name} + + + + ) +}