Paul Frazee
105 lines
2.5 KiB
TypeScript
105 lines
2.5 KiB
TypeScript
import React from 'react'
|
|
import {View} from 'react-native'
|
|
import {Trans} from '@lingui/macro'
|
|
|
|
import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf'
|
|
import {Text} from '#/components/Typography'
|
|
import {RichText} from '#/components/RichText'
|
|
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '../icons/Chevron'
|
|
import {UserAvatar} from '#/view/com/util/UserAvatar'
|
|
import {sanitizeHandle} from '#/lib/strings/handles'
|
|
import {pluralize} from '#/lib/strings/helpers'
|
|
|
|
export function Outer({
|
|
children,
|
|
style,
|
|
}: React.PropsWithChildren<ViewStyleProp>) {
|
|
return (
|
|
<View
|
|
style={[
|
|
a.flex_row,
|
|
a.align_center,
|
|
a.gap_sm,
|
|
a.w_full,
|
|
a.pt_md,
|
|
a.pb_md,
|
|
a.pl_md,
|
|
a.pr_lg,
|
|
a.overflow_hidden,
|
|
flatten(style),
|
|
]}>
|
|
<View style={[a.flex_row, a.align_center, a.w_full, a.gap_md]}>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export function Avatar({avatar}: {avatar?: string}) {
|
|
return <UserAvatar type="list" size={40} avatar={avatar} />
|
|
}
|
|
|
|
export function Title({value}: {value: string}) {
|
|
return <Text style={[a.text_md, a.font_bold, a.pb_2xs]}>{value}</Text>
|
|
}
|
|
|
|
export function Description({value, handle}: {value?: string; handle: string}) {
|
|
return value ? (
|
|
<RichText value={value} style={[]} />
|
|
) : (
|
|
<Text>
|
|
<Trans>
|
|
Moderation service managed by @{sanitizeHandle(handle, '@')}
|
|
</Trans>
|
|
</Text>
|
|
)
|
|
}
|
|
|
|
export function Content({
|
|
title,
|
|
description,
|
|
handle,
|
|
likeCount,
|
|
}: {
|
|
title: string
|
|
description?: string
|
|
handle: string
|
|
likeCount?: number
|
|
}) {
|
|
const t = useTheme()
|
|
|
|
return (
|
|
<View style={[a.flex_1, a.flex_row, a.align_center, a.justify_between]}>
|
|
<View>
|
|
<Text style={[a.text_md, a.font_bold, a.pb_2xs]}>{title}</Text>
|
|
|
|
{description ? (
|
|
<RichText value={description} style={[]} />
|
|
) : (
|
|
<Text>
|
|
<Trans>
|
|
Moderation service managed by {sanitizeHandle(handle, '@')}
|
|
</Trans>
|
|
</Text>
|
|
)}
|
|
|
|
{typeof likeCount === 'number' && (
|
|
<Text
|
|
style={[
|
|
t.atoms.text_contrast_medium,
|
|
a.text_sm,
|
|
{fontWeight: '500'},
|
|
a.mt_sm,
|
|
]}>
|
|
<Trans>
|
|
Liked by {likeCount || 0} {pluralize(likeCount || 0, 'user')}
|
|
</Trans>
|
|
</Text>
|
|
)}
|
|
</View>
|
|
|
|
<ChevronRight size="md" style={[a.z_10, t.atoms.text_contrast_low]} />
|
|
</View>
|
|
)
|
|
}
|