feat: add expo mobile application source code

2026-05-21 16:06:35 +07:00
parent 76d7a5c5c6
commit 0c65a7811b
77 changed files with 20356 additions and 0 deletions
@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { useAppTheme } from '../context/ThemeContext';
+import { Feather } from '@expo/vector-icons';
+import { Popup } from './Popup';
+
+interface DropdownProps {
+  label?: string;
+  value: string;
+  options: string[];
+  onSelect: (val: string) => void;
+  required?: boolean;
+  infoText?: string;
+  placeholder?: string;
+}
+
+const LIME = '#C6F135';
+
+export const Dropdown: React.FC<DropdownProps> = ({ 
+  label, 
+  value, 
+  options, 
+  onSelect, 
+  required = false,
+  infoText,
+  placeholder = 'Choose an option...'
+}) => {
+  const { colors, isDark } = useAppTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const bg = isDark ? '#1A1A1A' : '#F5F5F5';
+  const border = isDark ? '#2A2A2A' : '#EEEEEE';
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <View style={styles.labelRow}>
+          <Text style={[styles.label, { color: colors.textSecondary }]}>
+            {label}
+            {required ? <Text style={{ color: '#EF4444' }}> *</Text> : <Text style={{ color: isDark ? '#666' : '#CCC', fontSize: 10 }}> (Optional)</Text>}
+          </Text>
+        </View>
+      )}
+
+      <TouchableOpacity 
+        style={[styles.inputBox, { backgroundColor: bg, borderColor: border }]}
+        onPress={() => setIsOpen(true)}
+      >
+        <Text style={[styles.inputText, { color: value ? colors.text : (isDark ? '#444' : '#BBB') }]}>
+          {value || placeholder}
+        </Text>
+        <Feather name="chevron-down" size={18} color={isDark ? '#555' : '#AAA'} />
+      </TouchableOpacity>
+      
+      {infoText && <Text style={[styles.infoText, { color: isDark ? '#6B6B6B' : '#9B9B9B' }]}>{infoText}</Text>}
+
+      <Popup visible={isOpen} onClose={() => setIsOpen(false)} title={`${label || 'Option'}`}>
+        <View style={styles.listContainer}>
+          {options.map((opt, idx) => (
+            <TouchableOpacity 
+              key={idx} 
+              style={[styles.optionItem, { borderBottomColor: border, borderBottomWidth: idx < options.length - 1 ? 1 : 0 }]}
+              onPress={() => {
+                onSelect(opt);
+                setIsOpen(false);
+              }}
+            >
+              <Text style={[styles.optionText, { color: colors.text, fontFamily: value === opt ? 'Outfit_700Bold' : 'Outfit_400Regular' }]}>
+                {opt}
+              </Text>
+              {value === opt && <Feather name="check-circle" size={18} color={LIME} />}
+            </TouchableOpacity>
+          ))}
+        </View>
+      </Popup>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 18,
+    width: '100%',
+  },
+  labelRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    marginBottom: 8,
+  },
+  label: {
+    fontSize: 11,
+    fontFamily: 'Outfit_700Bold',
+    letterSpacing: 1,
+    textTransform: 'uppercase',
+  },
+  inputBox: {
+    height: 56,
+    borderRadius: 14,
+    paddingHorizontal: 16,
+    borderWidth: 1.5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  inputText: {
+    fontSize: 15,
+    fontFamily: 'Outfit_500Medium',
+    flex: 1,
+  },
+  infoText: {
+    fontSize: 12,
+    marginTop: 6,
+    marginLeft: 4,
+    fontFamily: 'Outfit_400Regular',
+  },
+  listContainer: {
+    paddingTop: 8,
+  },
+  optionItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 18,
+  },
+  optionText: {
+    fontSize: 15,
+  },
+});