outline-rn/components/ui/StatusItem.tsx

import { View, Text, StyleSheet } from 'react-native';

export default function StatusItem({ text, state = 0 }: { text: string; state?: number }) {
  return (
    <View style={styles.statusItem}>
        <View style={styles.outerCircle}>
            <View style={styles.innerCircle}></View>
        </View>
      <Text style={{color: '#555'}}>{text}</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  statusItem: {
    height: 40,
    backgroundColor: '#FFF',
    borderRadius: 8,
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    gap: 6
  },
  outerCircle:{
    width: 14,
    height: 14,
    backgroundColor: 'rgba(82, 196, 26, 0.35)',
    borderRadius: 999,
    justifyContent: 'center',
    alignItems: 'center'
  },
  innerCircle: {
    width: 10,
    height: 10,
    backgroundColor: '#52C41A',
    borderRadius: 999,
  }
});