init

2026-04-21 18:00:30 +07:00
parent 2173a765c9
commit 23dc306f12
67 changed files with 10302 additions and 67 deletions
@@ -0,0 +1,87 @@
+import React from 'react';
+import { TextInput, View, Text, StyleSheet, Pressable } from 'react-native';
+import { colors, fonts, borderRadius, spacing } from '../utils/theme';
+
+export default function Input({
+  label,
+  value,
+  onChangeText,
+  placeholder,
+  secureTextEntry = false,
+  autoCapitalize = 'none',
+  keyboardType = 'default',
+  multiline = false,
+  rightIcon,
+  onRightIconPress,
+  style,
+}) {
+  return (
+    <View style={[styles.container, style]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <View style={styles.inputRow}>
+        <TextInput
+          style={[styles.input, multiline && styles.multiline, rightIcon && styles.inputWithIcon]}
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor={colors.textMuted}
+          secureTextEntry={secureTextEntry}
+          autoCapitalize={autoCapitalize}
+          keyboardType={keyboardType}
+          multiline={multiline}
+          selectionColor={colors.primary}
+        />
+        {rightIcon && (
+          <Pressable style={styles.iconBtn} onPress={onRightIconPress} hitSlop={8}>
+            <Text style={styles.iconText}>{rightIcon}</Text>
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: spacing.md,
+  },
+  label: {
+    color: colors.textSecondary,
+    fontSize: fonts.sizes.sm,
+    fontWeight: fonts.weights.medium,
+    marginBottom: spacing.xs,
+  },
+  inputRow: {
+    position: 'relative',
+  },
+  input: {
+    backgroundColor: colors.surface,
+    borderRadius: borderRadius.md,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+    color: colors.text,
+    fontSize: fonts.sizes.md,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+  inputWithIcon: {
+    paddingRight: 48,
+  },
+  multiline: {
+    minHeight: 100,
+    textAlignVertical: 'top',
+  },
+  iconBtn: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconText: {
+    fontSize: 18,
+    color: colors.textSecondary,
+  },
+});