fitness profile

functionality added, need polishing

apps/mobile/src/components/Input.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { View, Text, TextInput, StyleSheet, TextInputProps } from "react-native";
+
+interface InputProps extends TextInputProps {
+  label: string;
+  error?: string;
+}
+
+export function Input({ label, error, style, ...props }: InputProps) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      <TextInput
+        style={[styles.input, error && styles.inputError, style]}
+        placeholderTextColor="#9ca3af"
+        {...props}
+      />
+      {error && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#374151",
+    marginBottom: 8,
+  },
+  input: {
+    backgroundColor: "white",
+    borderWidth: 1,
+    borderColor: "#e5e7eb",
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    fontSize: 16,
+    color: "#1f2937",
+  },
+  inputError: {
+    borderColor: "#ef4444",
+  },
+  errorText: {
+    fontSize: 12,
+    color: "#ef4444",
+    marginTop: 4,
+  },
+});

apps/mobile/src/components/Picker.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { Picker as RNPicker } from "@react-native-picker/picker";
+
+interface PickerProps {
+  label: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  items: { label: string; value: string }[];
+  error?: string;
+}
+
+export function Picker({ label, value, onValueChange, items, error }: PickerProps) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.label}>{label}</Text>
+      <View style={[styles.pickerWrapper, error && styles.pickerError]}>
+        <RNPicker
+          selectedValue={value}
+          onValueChange={onValueChange}
+          style={styles.picker}
+        >
+          <RNPicker.Item label="Select..." value="" />
+          {items.map((item) => (
+            <RNPicker.Item key={item.value} label={item.label} value={item.value} />
+          ))}
+        </RNPicker>
+      </View>
+      {error && <Text style={styles.errorText}>{error}</Text>}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+  },
+  label: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#374151",
+    marginBottom: 8,
+  },
+  pickerWrapper: {
+    backgroundColor: "white",
+    borderWidth: 1,
+    borderColor: "#e5e7eb",
+    borderRadius: 8,
+    overflow: "hidden",
+  },
+  pickerError: {
+    borderColor: "#ef4444",
+  },
+  picker: {
+    height: 50,
+  },
+  errorText: {
+    fontSize: 12,
+    color: "#ef4444",
+    marginTop: 4,
+  },
+});