jinyaqiu
828e84710f
All checks were successful
Dev Deploy / Explore-Gitea-Actions (push) Successful in 24s
69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
|
|
interface CreateCountProps {
|
|
title: string;
|
|
icon: React.ReactNode;
|
|
number: number;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
const CreateCountComponent = (props: CreateCountProps) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
|
|
<View className="mt-1">
|
|
{props.icon}
|
|
</View>
|
|
</View>
|
|
<ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
justifyContent: "space-between",
|
|
gap: 8,
|
|
backgroundColor: "#FAF9F6",
|
|
padding: 16,
|
|
borderRadius: 12,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 5,
|
|
},
|
|
header: {
|
|
width: "100%",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
// 靠左展示
|
|
textAlign: 'left',
|
|
},
|
|
title: {
|
|
width: "53%",
|
|
fontSize: 11,
|
|
fontWeight: "700",
|
|
// 允许换行
|
|
flexWrap: "wrap",
|
|
},
|
|
number: {
|
|
fontSize: 32,
|
|
fontWeight: "700",
|
|
paddingTop: 8,
|
|
width: "100%",
|
|
// 靠右展示
|
|
textAlign: "right",
|
|
},
|
|
})
|
|
export default CreateCountComponent;
|