Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
2.6 kB · 85 lines
TSX
at commit 5efae600
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586import {View} from 'react-native'import {type AppBskyLabelerDefs} from '@atproto/api'import {msg, Trans} from '@lingui/macro'import {useLingui} from '@lingui/react'
import {getLabelingServiceTitle} from '#/lib/moderation'import {atoms as a, useBreakpoints, useTheme} from '#/alf'import {Button, useButtonContext} from '#/components/Button'import {Divider} from '#/components/Divider'import * as LabelingServiceCard from '#/components/LabelingServiceCard'import {Text} from '#/components/Typography'import {type ReportDialogProps} from './types'
export function SelectLabelerView({ ...props}: ReportDialogProps & { labelers: AppBskyLabelerDefs.LabelerViewDetailed[] onSelectLabeler: (v: string) => void}) { const t = useTheme() const {_} = useLingui() const {gtMobile} = useBreakpoints()
return ( <View style={[a.gap_lg]}> <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}> <Text style={[a.text_2xl, a.font_semi_bold]}> <Trans>Select moderator</Trans> </Text> <Text style={[a.text_md, t.atoms.text_contrast_medium]}> <Trans>To whom would you like to send this report?</Trans> </Text> </View>
<Divider />
<View style={[a.gap_sm]}> {props.labelers.map(labeler => { return ( <Button key={labeler.creator.did} label={_(msg`Send report to ${labeler.creator.displayName}`)} onPress={() => props.onSelectLabeler(labeler.creator.did)}> <LabelerButton labeler={labeler} /> </Button> ) })} </View> </View> )}
function LabelerButton({ labeler,}: { labeler: AppBskyLabelerDefs.LabelerViewDetailed}) { const t = useTheme() const {hovered, pressed} = useButtonContext() const interacted = hovered || pressed
return ( <LabelingServiceCard.Outer style={[ a.p_md, a.rounded_sm, t.atoms.bg_contrast_25, interacted && t.atoms.bg_contrast_50, ]}> <LabelingServiceCard.Avatar avatar={labeler.creator.avatar} /> <LabelingServiceCard.Content> <LabelingServiceCard.Title value={getLabelingServiceTitle({ displayName: labeler.creator.displayName, handle: labeler.creator.handle, })} /> <Text style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semi_bold]}> @{labeler.creator.handle} </Text> </LabelingServiceCard.Content> </LabelingServiceCard.Outer> )}