add ios app

app-ios/components/profile/SectionCard.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { AppColors } from '@/constants/theme';
+
+interface SectionCardProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function SectionCard({ title, children }: SectionCardProps) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      <View style={styles.card}>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 12,
+    color: AppColors.slatePurple,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    paddingHorizontal: 4,
+    marginBottom: 10,
+  },
+  card: {
+    backgroundColor: AppColors.white,
+    borderRadius: 16,
+    overflow: 'hidden',
+    shadowColor: AppColors.deepPurple,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.04,
+    shadowRadius: 8,
+    elevation: 1,
+  },
+});

app-ios/components/profile/SettingItem.tsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Switch } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { AppColors } from '@/constants/theme';
+
+interface SettingItemProps {
+  icon: string;
+  label: string;
+  description?: string;
+  type: 'arrow' | 'toggle';
+  value?: boolean;
+  onPress?: () => void;
+  onToggle?: (value: boolean) => void;
+  isLast?: boolean;
+}
+
+export function SettingItem({ 
+  icon, 
+  label, 
+  description, 
+  type, 
+  value = false,
+  onPress, 
+  onToggle,
+  isLast = false,
+}: SettingItemProps) {
+  const handlePress = () => {
+    if (type === 'arrow' && onPress) {
+      onPress();
+    }
+  };
+
+  return (
+    <TouchableOpacity 
+      style={[styles.container, !isLast && styles.border]}
+      onPress={handlePress}
+      activeOpacity={type === 'arrow' ? 0.7 : 1}
+      disabled={type === 'toggle'}
+    >
+      <View style={styles.iconContainer}>
+        <Ionicons 
+          name={icon as any} 
+          size={20} 
+          color={AppColors.deepPurple} 
+        />
+      </View>
+      
+      <View style={styles.content}>
+        <Text style={styles.label}>{label}</Text>
+        {description && (
+          <Text style={styles.description}>{description}</Text>
+        )}
+      </View>
+      
+      {type === 'arrow' ? (
+        <Ionicons 
+          name="chevron-forward" 
+          size={18} 
+          color={AppColors.slatePurple} 
+        />
+      ) : (
+        <Switch
+          value={value}
+          onValueChange={onToggle}
+          trackColor={{ 
+            false: AppColors.slatePurple, 
+            true: AppColors.mediumPurple 
+          }}
+          thumbColor={AppColors.white}
+          ios_backgroundColor={AppColors.slatePurple}
+        />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  border: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(32, 0, 40, 0.06)',
+  },
+  iconContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    backgroundColor: AppColors.lavender,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  content: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 15,
+    color: AppColors.deepPurple,
+  },
+  description: {
+    fontSize: 12,
+    color: AppColors.slatePurple,
+    marginTop: 2,
+  },
+});