diff options
Diffstat (limited to 'src/components/ageAssurance/AgeAssuranceBadge.tsx')
-rw-r--r-- | src/components/ageAssurance/AgeAssuranceBadge.tsx | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/src/components/ageAssurance/AgeAssuranceBadge.tsx b/src/components/ageAssurance/AgeAssuranceBadge.tsx new file mode 100644 index 000000000..030e30529 --- /dev/null +++ b/src/components/ageAssurance/AgeAssuranceBadge.tsx @@ -0,0 +1,46 @@ +import {View} from 'react-native' +import {Trans} from '@lingui/macro' + +import {atoms as a, select, useTheme} from '#/alf' +import {ShieldCheck_Stroke2_Corner0_Rounded as Shield} from '#/components/icons/Shield' +import {Text} from '#/components/Typography' + +export function AgeAssuranceBadge() { + const t = useTheme() + + return ( + <View + style={[ + a.flex_row, + a.align_center, + a.gap_xs, + a.px_sm, + a.py_xs, + a.pr_sm, + a.rounded_full, + { + backgroundColor: select(t.name, { + light: t.palette.primary_100, + dark: t.palette.primary_100, + dim: t.palette.primary_100, + }), + }, + ]}> + <Shield size="sm" /> + <Text + style={[ + a.font_bold, + a.leading_snug, + { + color: select(t.name, { + light: t.palette.primary_800, + dark: t.palette.primary_800, + dim: t.palette.primary_800, + }), + }, + ]}> + <Trans>Age Assurance</Trans> + </Text> + </View> + ) +} |