58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { View, Text, StyleSheet, Platform } from "react-native";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import { useThemeContext } from "@/hooks/use-theme-context";
|
|
|
|
interface FormSectionProps {
|
|
title: string;
|
|
icon?: keyof typeof Ionicons.glyphMap;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* A styled section wrapper for grouping related form fields
|
|
*/
|
|
export default function FormSection({ title, icon, children }: FormSectionProps) {
|
|
const { colors } = useThemeContext();
|
|
|
|
return (
|
|
<View style={[styles.container, { borderColor: colors.separator }]}>
|
|
<View style={styles.header}>
|
|
{icon && (
|
|
<Ionicons name={icon} size={18} color={colors.primary} style={styles.icon} />
|
|
)}
|
|
<Text style={[styles.title, { color: colors.text }]}>{title}</Text>
|
|
</View>
|
|
<View style={styles.content}>{children}</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: 20,
|
|
borderBottomWidth: 1,
|
|
paddingBottom: 16,
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginBottom: 16,
|
|
},
|
|
icon: {
|
|
marginRight: 8,
|
|
},
|
|
title: {
|
|
fontSize: 17,
|
|
fontWeight: "700",
|
|
fontFamily: Platform.select({
|
|
ios: "System",
|
|
android: "Roboto",
|
|
default: "System",
|
|
}),
|
|
},
|
|
content: {
|
|
gap: 0,
|
|
},
|
|
});
|