evandro
434cba2a69
SettingsScreen CC 23 -> below 10. Form parsing, change detection and the dark-theme check moved to utils/ with unit tests; the dark switch now reads the OS scheme instead of comparing the background colour. Adds characterization tests for the screen.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { useThemeColor } from '@/hooks/useThemeColor';
|
|
import React from 'react';
|
|
import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
|
|
|
|
interface SettingsSectionProps {
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function SettingsSection({ title, children }: SettingsSectionProps) {
|
|
const { width } = useWindowDimensions();
|
|
const colors = useThemeColor();
|
|
const isLargeScreen = width > 768;
|
|
|
|
return (
|
|
<View style={[styles.section, isLargeScreen && styles.desktopSection]}>
|
|
<Text style={[styles.sectionLabel, { color: colors.textMuted }]}>{title}</Text>
|
|
<View style={[styles.card, { backgroundColor: colors.cardBackground, borderColor: colors.border }]}>
|
|
{children}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
section: {
|
|
marginBottom: 24,
|
|
},
|
|
desktopSection: {
|
|
width: '100%',
|
|
maxWidth: 600,
|
|
},
|
|
sectionLabel: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
marginLeft: 16,
|
|
marginBottom: 8,
|
|
letterSpacing: 0.5,
|
|
},
|
|
card: {
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
borderWidth: 1,
|
|
},
|
|
});
|