@onairos/react-native 3.1.18 → 3.2.1

package/src/components/PlatformList.tsx

@@ -1,145 +1,145 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialIcons';
-import { COLORS, PLATFORMS } from '../constants';
-import type { PlatformListProps } from '../types';
-
-export const PlatformList: React.FC<PlatformListProps> = ({
-  connections,
-  onToggle,
-  isLoading,
-  canProceed,
-  onProceed,
-}) => {
-  const renderPlatformItem = (platform: string, isConnected: boolean) => {
-    const platformConfig = PLATFORMS[platform];
-    if (!platformConfig) return null;
-
-    return (
-      <View key={platform} style={styles.platformContainer}>
-        <View style={styles.platformHeader}>
-          <Icon name={platformConfig.icon} size={24} color={platformConfig.color} />
-          <Text style={styles.platformName}>{platformConfig.name}</Text>
-        </View>
-        {platformConfig.description && (
-          <Text style={styles.platformDescription}>{platformConfig.description}</Text>
-        )}
-        <TouchableOpacity
-          style={[
-            styles.connectButton,
-            isConnected ? styles.connectedButton : styles.disconnectedButton,
-          ]}
-          onPress={() => onToggle(platform, !isConnected)}
-          disabled={isLoading}
-        >
-          {isLoading ? (
-            <ActivityIndicator color="#fff" />
-          ) : (
-            <Text style={styles.buttonText}>
-              {isConnected ? 'Disconnect' : 'Connect'}
-            </Text>
-          )}
-        </TouchableOpacity>
-      </View>
-    );
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Connect your platforms</Text>
-      <Text style={styles.subtitle}>
-        Connect at least 2 platforms to proceed
-      </Text>
-      
-      <View style={styles.platformsList}>
-        {Object.entries(connections).map(([platform, status]) =>
-          renderPlatformItem(platform, !!status)
-        )}
-      </View>
-
-      <TouchableOpacity
-        style={[styles.proceedButton, !canProceed && styles.disabledButton]}
-        onPress={onProceed}
-        disabled={!canProceed || isLoading}
-      >
-        <Text style={styles.proceedButtonText}>Proceed</Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-  },
-  title: {
-    fontSize: 20,
-    fontWeight: '600',
-    marginBottom: 8,
-    color: COLORS.text.primary,
-  },
-  subtitle: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 24,
-  },
-  platformsList: {
-    flex: 1,
-  },
-  platformContainer: {
-    backgroundColor: '#fff',
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    borderWidth: 1,
-    borderColor: COLORS.border,
-  },
-  platformHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 8,
-  },
-  platformName: {
-    fontSize: 16,
-    fontWeight: '600',
-    marginLeft: 12,
-    color: COLORS.text.primary,
-  },
-  platformDescription: {
-    fontSize: 14,
-    color: COLORS.text.secondary,
-    marginBottom: 16,
-  },
-  connectButton: {
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 8,
-    alignItems: 'center',
-  },
-  connectedButton: {
-    backgroundColor: COLORS.success,
-  },
-  disconnectedButton: {
-    backgroundColor: COLORS.primary,
-  },
-  buttonText: {
-    color: '#fff',
-    fontWeight: '600',
-  },
-  proceedButton: {
-    backgroundColor: COLORS.primary,
-    paddingVertical: 16,
-    borderRadius: 12,
-    alignItems: 'center',
-    marginTop: 16,
-  },
-  disabledButton: {
-    opacity: 0.5,
-  },
-  proceedButtonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { COLORS, PLATFORMS } from '../constants';
+import type { PlatformListProps } from '../types';
+
+export const PlatformList: React.FC<PlatformListProps> = ({
+  connections,
+  onToggle,
+  isLoading,
+  canProceed,
+  onProceed,
+}) => {
+  const renderPlatformItem = (platform: string, isConnected: boolean) => {
+    const platformConfig = PLATFORMS[platform];
+    if (!platformConfig) return null;
+
+    return (
+      <View key={platform} style={styles.platformContainer}>
+        <View style={styles.platformHeader}>
+          <Icon name={platformConfig.icon} size={24} color={platformConfig.color} />
+          <Text style={styles.platformName}>{platformConfig.name}</Text>
+        </View>
+        {platformConfig.description && (
+          <Text style={styles.platformDescription}>{platformConfig.description}</Text>
+        )}
+        <TouchableOpacity
+          style={[
+            styles.connectButton,
+            isConnected ? styles.connectedButton : styles.disconnectedButton,
+          ]}
+          onPress={() => onToggle(platform, !isConnected)}
+          disabled={isLoading}
+        >
+          {isLoading ? (
+            <ActivityIndicator color="#fff" />
+          ) : (
+            <Text style={styles.buttonText}>
+              {isConnected ? 'Disconnect' : 'Connect'}
+            </Text>
+          )}
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Connect your platforms</Text>
+      <Text style={styles.subtitle}>
+        Connect at least 2 platforms to proceed
+      </Text>
+      
+      <View style={styles.platformsList}>
+        {Object.entries(connections).map(([platform, status]) =>
+          renderPlatformItem(platform, !!status)
+        )}
+      </View>
+
+      <TouchableOpacity
+        style={[styles.proceedButton, !canProceed && styles.disabledButton]}
+        onPress={onProceed}
+        disabled={!canProceed || isLoading}
+      >
+        <Text style={styles.proceedButtonText}>Proceed</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: COLORS.text.primary,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 24,
+  },
+  platformsList: {
+    flex: 1,
+  },
+  platformContainer: {
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    borderWidth: 1,
+    borderColor: COLORS.border,
+  },
+  platformHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8,
+  },
+  platformName: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginLeft: 12,
+    color: COLORS.text.primary,
+  },
+  platformDescription: {
+    fontSize: 14,
+    color: COLORS.text.secondary,
+    marginBottom: 16,
+  },
+  connectButton: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  connectedButton: {
+    backgroundColor: COLORS.success,
+  },
+  disconnectedButton: {
+    backgroundColor: COLORS.primary,
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  proceedButton: {
+    backgroundColor: COLORS.primary,
+    paddingVertical: 16,
+    borderRadius: 12,
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  disabledButton: {
+    opacity: 0.5,
+  },
+  proceedButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });