70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, Switch, StyleSheet } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import {
|
|
AppColors,
|
|
BorderRadius,
|
|
FontSizes,
|
|
Spacing,
|
|
FontWeights,
|
|
} from '@/constants/theme';
|
|
|
|
interface DevModeToggleProps {
|
|
value: boolean;
|
|
onValueChange: (value: boolean) => void;
|
|
label?: string;
|
|
hint?: string;
|
|
}
|
|
|
|
export function DevModeToggle({
|
|
value,
|
|
onValueChange,
|
|
label = 'Developer Mode',
|
|
hint = 'Show WebView dashboard',
|
|
}: DevModeToggleProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.left}>
|
|
<Ionicons name="code-slash" size={20} color={AppColors.warning} />
|
|
<View>
|
|
<Text style={styles.label}>{label}</Text>
|
|
<Text style={styles.hint}>{hint}</Text>
|
|
</View>
|
|
</View>
|
|
<Switch
|
|
value={value}
|
|
onValueChange={onValueChange}
|
|
trackColor={{ false: AppColors.border, true: AppColors.primaryLight }}
|
|
thumbColor={value ? AppColors.primary : AppColors.textMuted}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
backgroundColor: AppColors.warningLight,
|
|
borderRadius: BorderRadius.lg,
|
|
padding: Spacing.md,
|
|
borderWidth: 1,
|
|
borderColor: AppColors.warning,
|
|
},
|
|
left: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.md,
|
|
},
|
|
label: {
|
|
fontSize: FontSizes.sm,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
hint: {
|
|
fontSize: FontSizes.xs,
|
|
color: AppColors.textSecondary,
|
|
},
|
|
});
|