feat: implemented badge

Author: computools-anastasiia-nahaiska

src/badge/Badge.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {View, Text, type ViewProps, type StyleProp, type TextStyle} from 'react-native';
+
+import {styles} from './badge.styles';
+import {useTheme} from '../theme/useTheme.hook';
+import {useTypography} from '../typography/useTypography.component';
+
+export interface BadgeProps extends ViewProps {
+  value: string;
+
+  valueStyle?: StyleProp<TextStyle>;
+}
+
+export const Badge: React.FC<BadgeProps> = ({value, style, valueStyle, ...props}) => {
+  const {error} = useTheme();
+  const {labelSmall} = useTypography();
+
+  return (
+    <View style={[styles.container, {backgroundColor: error.background}, style]} {...props}>
+      <Text style={[labelSmall, {color: error.text}, valueStyle]}>{value}</Text>
+    </View>
+  );
+};

src/badge/badge.styles.ts

@@ -0,0 +1,13 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    paddingHorizontal: 4,
+    minWidth: 16,
+    height: 16,
+    borderRadius: 100,
+  },
+});

src/index.tsx

@@ -1,3 +1,5 @@
+export {Badge, type BadgeProps} from './badge/Badge.component';
+
 export {Divider, type DividerProps} from './divider/Divider.component';
 
 export {BottomSheet, type BottomSheetProps, type BottomSheetRef} from './sheets/bottom-sheet/BottomSheet.component';