103 lines
2.9 KiB
TypeScript
103 lines
2.9 KiB
TypeScript
import PeopleSvg from "@/assets/icons/svg/people.svg";
|
|
import { Image, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
|
|
interface CategoryProps {
|
|
title: string;
|
|
data: { title: string, number: string | number }[];
|
|
bgSvg: string | null;
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
|
|
return (
|
|
<View style={[styles.container, style]}>
|
|
<View style={styles.backgroundContainer}>
|
|
<Image
|
|
source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/people.png')}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
resizeMode: "cover"
|
|
}}
|
|
/>
|
|
<View style={styles.overlay} />
|
|
</View>
|
|
<View style={styles.content}>
|
|
{data.map((item, index) => (
|
|
<View style={styles.item} key={index}>
|
|
<ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
|
|
<ThemedText style={styles.itemNumber}>{item.number}</ThemedText>
|
|
</View>
|
|
))}
|
|
<View style={styles.titleContent}>
|
|
<ThemedText style={styles.title}>{title}</ThemedText>
|
|
<PeopleSvg />
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
borderRadius: 32,
|
|
overflow: 'hidden',
|
|
position: 'relative',
|
|
aspectRatio: 1,
|
|
},
|
|
backgroundContainer: {
|
|
...StyleSheet.absoluteFillObject,
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.2)', // 0% 不透明度的黑色
|
|
},
|
|
content: {
|
|
paddingHorizontal: 40,
|
|
paddingVertical: 24,
|
|
justifyContent: 'flex-end',
|
|
flex: 1
|
|
},
|
|
titleContent: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
position: 'relative',
|
|
width: '100%',
|
|
marginTop: 16
|
|
},
|
|
title: {
|
|
color: 'white',
|
|
fontSize: 16,
|
|
fontWeight: '700',
|
|
textShadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
textShadowOffset: { width: 1, height: 1 },
|
|
textShadowRadius: 2,
|
|
position: 'absolute',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
zIndex: 1,
|
|
},
|
|
item: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
justifyContent: 'space-between',
|
|
},
|
|
itemTitle: {
|
|
color: 'white',
|
|
fontSize: 14,
|
|
fontWeight: '700',
|
|
},
|
|
itemNumber: {
|
|
color: 'white',
|
|
fontSize: 14,
|
|
}
|
|
});
|
|
|
|
export default CategoryComponent;
|