81 lines
1.7 KiB
TypeScript
81 lines
1.7 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
ViewStyle,
|
|
StyleProp,
|
|
} from "react-native";
|
|
import { useTheme } from "../contexts/ThemeContext";
|
|
|
|
interface SectionHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
actionLabel?: string;
|
|
onActionPress?: () => void;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
/**
|
|
* SectionHeader - Clean section header with optional action button
|
|
*
|
|
* Usage:
|
|
* - Divides content into logical sections
|
|
* - Optional subtitle for additional context
|
|
* - Optional action button (e.g., "See All", "Add New")
|
|
*/
|
|
export function SectionHeader({
|
|
title,
|
|
subtitle,
|
|
actionLabel,
|
|
onActionPress,
|
|
style,
|
|
}: SectionHeaderProps) {
|
|
const { colors, typography } = useTheme();
|
|
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<View style={styles.textContainer}>
|
|
<Text style={[typography.h2, { color: colors.textPrimary }]}>
|
|
{title}
|
|
</Text>
|
|
{subtitle && (
|
|
<Text
|
|
style={[
|
|
typography.caption,
|
|
{ color: colors.textTertiary, marginTop: 2 },
|
|
]}
|
|
>
|
|
{subtitle}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
{actionLabel && onActionPress && (
|
|
<TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
|
|
<Text
|
|
style={[
|
|
typography.body,
|
|
{ color: colors.primary, fontWeight: "600" },
|
|
]}
|
|
>
|
|
{actionLabel}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: 12,
|
|
},
|
|
textContainer: {
|
|
flex: 1,
|
|
},
|
|
});
|