109 lines
2.3 KiB
TypeScript
109 lines
2.3 KiB
TypeScript
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,
|
|
},
|
|
});
|