60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, Pressable } from 'react-native';
|
|
import { useTheme } from '../../../theme';
|
|
|
|
interface AgentSectionHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
actionTitle?: string;
|
|
onAction?: () => void;
|
|
}
|
|
|
|
export const AgentSectionHeader = ({
|
|
title,
|
|
subtitle,
|
|
actionTitle,
|
|
onAction,
|
|
}: AgentSectionHeaderProps) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.titleContainer}>
|
|
<Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
|
|
{subtitle && (
|
|
<Text style={[styles.subtitle, { color: theme.colors.textMuted }]}>{subtitle}</Text>
|
|
)}
|
|
</View>
|
|
{actionTitle && onAction && (
|
|
<Pressable onPress={onAction}>
|
|
<Text style={[styles.action, { color: theme.colors.primary }]}>{actionTitle}</Text>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-end',
|
|
marginBottom: 16,
|
|
},
|
|
titleContainer: {
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
},
|
|
subtitle: {
|
|
fontSize: 13,
|
|
marginTop: 2,
|
|
},
|
|
action: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
});
|