57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
|
|
import { Pressable, StyleSheet, Text, View } from "react-native";
|
|
|
|
type ConversationHeaderProps = {
|
|
totalLabel: string;
|
|
onPressCreate?: () => void;
|
|
};
|
|
|
|
export function ConversationHeader({
|
|
totalLabel,
|
|
onPressCreate,
|
|
}: ConversationHeaderProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.sideSpacer} />
|
|
<Text style={styles.title}>{`消息(${totalLabel})`}</Text>
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
onPress={onPressCreate}
|
|
style={({ pressed }) => [styles.addButton, pressed && styles.addButtonPressed]}
|
|
>
|
|
<MaterialIcons color="#666666" name="add-circle-outline" size={30} />
|
|
</Pressable>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
height: 52,
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 20,
|
|
},
|
|
sideSpacer: {
|
|
width: 36,
|
|
},
|
|
title: {
|
|
color: "#242424",
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
letterSpacing: -0.2,
|
|
},
|
|
addButton: {
|
|
alignItems: "center",
|
|
borderCurve: "continuous",
|
|
borderRadius: 18,
|
|
height: 36,
|
|
justifyContent: "center",
|
|
width: 36,
|
|
},
|
|
addButtonPressed: {
|
|
opacity: 0.7,
|
|
},
|
|
});
|