Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | import Ionicons from '@expo/vector-icons/Ionicons';
import { Card, Text, XStack } from 'tamagui';
import { IconSymbol } from '@/src/components/ui/IconSymbol';
import { Colors } from '@/src/constants/theme';
import { useThemeAwareColorScheme } from '@/src/hooks/useThemeAwareColorScheme';
interface SettingItemProps {
icon: string;
label: string;
value?: string;
onPress: () => void;
}
export function SettingItem({ icon, label, value, onPress }: SettingItemProps) {
const colorScheme = useThemeAwareColorScheme();
const colors = Colors[colorScheme];
return (
<Card
padding="$4"
borderWidth={1}
borderColor={colors.iconAlpha40 as any}
backgroundColor={colors.background}
pressStyle={{ scale: 0.98, opacity: 0.9 }}
onPress={onPress}
animation="quick"
bordered
>
<XStack justifyContent="space-between" alignItems="center">
<XStack gap="$3" alignItems="center">
<IconSymbol name={icon as any} size={24} color={colors.icon} />
<Text fontSize={16} fontWeight="500" color={colors.text}>
{label}
</Text>
</XStack>
<XStack gap="$2" alignItems="center">
{value && (
<Text fontSize={14} color={colors.icon}>
{value}
</Text>
)}
<Ionicons name="chevron-forward" size={20} color={colors.icon} />
</XStack>
</XStack>
</Card>
);
}
|