Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 4x 5x 5x 5x 5x | import React, { memo } from 'react';
import { ImageSourcePropType, Text, View } from 'react-native';
import { ArrowRightIcon } from '@repo/ui/icons/ArrowRight';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { useTheme } from '@repo/ui/themes/ThemeContext';
import { textStyles } from '@repo/ui/themes/typography';
import BalloonRequest from '@/components/BalloonRequest';
interface BalloonPendingRequestProps {
pendingCount: number;
image: ImageSourcePropType;
onPress: () => void;
}
export const BalloonPendingRequest = memo(
({ pendingCount, image, onPress }: BalloonPendingRequestProps) => {
const { theme } = useTheme();
const styles = useStyles();
return (
<BalloonRequest
customNode={
<View style={styles.pending}>
<Text style={styles.label}>YOU HAVE</Text>
<Text style={styles.count}>{pendingCount}</Text>
<Text style={styles.label}>PENDING REQUEST{pendingCount > 1 ? 'S' : ''}</Text>
</View>
}
customTextContainerStyle={styles.contentWrapper}
image={image}
onPress={onPress}
buttonIcon={<ArrowRightIcon color={theme.colors.icon.primary} />}
buttonSize={80}
buttonBackgroundColor={theme.colors.badge.light}
/>
);
},
);
const useStyles = makeStyles(theme => ({
contentWrapper: {
paddingTop: 0,
},
pending: {
alignItems: 'center',
justifyContent: 'center',
},
label: {
fontSize: 32,
...textStyles.title,
color: theme.colors.text.primary,
textAlign: 'center',
},
count: {
fontSize: 128,
...textStyles.title,
color: theme.colors.text.primary,
},
}));
|