Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
1.5 kB · 64 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import {type StyleProp, type ViewStyle} from 'react-native'import {View} from 'react-native'import {msg, plural} from '@lingui/core/macro'import {useLingui} from '@lingui/react'
import {atoms as a, useTheme} from '#/alf'import {Text} from '#/components/Typography'
/** * Absolutely positioned time indicator showing how many seconds are remaining * Time is in seconds */export function TimeIndicator({ time, style,}: { time: number style?: StyleProp<ViewStyle>}) { const t = useTheme() const {_} = useLingui()
if (isNaN(time)) { return null }
const minutes = Math.floor(time / 60) const seconds = String(time % 60).padStart(2, '0')
return ( <View pointerEvents="none" accessibilityLabel={_( msg`Time remaining: ${plural(Number(time) || 0, { one: '# second', other: '# seconds', })}`, )} accessibilityHint="" style={[ { backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: 6, paddingHorizontal: 6, paddingVertical: 3, left: 6, bottom: 6, minHeight: 21, }, a.absolute, a.justify_center, style, ]}> <Text style={[ {color: t.palette.white, fontSize: 12, fontVariant: ['tabular-nums']}, a.font_semi_bold, {lineHeight: 1.25}, ]}> {`${minutes}:${seconds}`} </Text> </View> )}