add app/pages/search/ConnectType.js

Strides-SPAPP/app/pages/search/ConnectType.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import TextView from '../../components/TextView';
+
+const ConnectType = ({type, available, all, color=textPrimary}) => {
+  if (type) {
+    return (
+      <View style={[styles.connectType, {borderColor: color}]}>
+        <TextView style={[styles.typeLabel, {backgroundColor: color}]}>{type}</TextView>
+        <TextView style={[styles.typeContent, {color: color}]}><Text style={styles.typeBold}>{available}</Text>/{all}</TextView>
+      </View>
+    );
+  } else {
+    return <></>;
+  }
+}
+
+export default ConnectType;
+
+export const ConnectTypeV2 = ({type, available, all, color=textPrimary}) => {
+  if (type) {
+    return (
+      <View style={[styles.connectTypeV2, {borderColor: color}]}>
+        <TextView style={[styles.typeLabelV2, {color: color}]}>{type}</TextView>
+        <TextView style={[styles.typeContentV2]}><Text style={styles.typeBoldV2}>{available}</Text>/{all}</TextView>
+      </View>
+    );
+  } else {
+    return <></>;
+  }
+}
+
+const styles = StyleSheet.create({
+  connectType: {
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: textPrimary,
+    borderRadius: 3,
+    marginRight: 16,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  connectTypeV2: {
+    height: 20,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: textPrimary,
+    borderRadius: 30,
+    marginRight: 6,
+    alignItems: 'center',
+    flexDirection: 'row'
+  },
+  typeLabel: {
+    color: textLight,
+    fontSize: 12,
+    paddingTop: 2,
+    paddingLeft: 10,
+    paddingRight: 10,
+    paddingBottom: 2,
+    backgroundColor: textPrimary
+  },
+  typeLabelV2: {
+    color: textPrimary,
+    fontSize: 12,
+    paddingLeft: 8,
+    paddingRight: 4
+  },
+  typeContent: {
+    color: textSecondary,
+    fontSize: 12,
+    paddingLeft: 10,
+    paddingRight: 6,
+  },
+  typeContentV2: {
+    color: textLight,
+    height: 20,
+    fontSize: 12,
+    paddingLeft: 10,
+    paddingRight: 8,
+    borderRadius: 30,
+    backgroundColor: textPrimary
+  },
+  typeBold: {
+    color: textPrimary,
+    fontSize: 14,
+    fontWeight: 'bold'
+  },
+  typeBoldV2: {
+    color: textLight,
+    fontSize: 12,
+    fontWeight: 'bold'
+  }
+})