120 lines
3.9 KiB
TypeScript
120 lines
3.9 KiB
TypeScript
import ImgTotalSvg from "@/assets/icons/svg/imgTotalWhite.svg";
|
|
import LiveTotalSvg from "@/assets/icons/svg/liveTotal.svg";
|
|
import PeopleSvg from "@/assets/icons/svg/people.svg";
|
|
import TimeTotalSvg from "@/assets/icons/svg/timeTotalWhite.svg";
|
|
import VideoTotalSvg from "@/assets/icons/svg/videoTotalWhite.svg";
|
|
import { BlurView } from "expo-blur";
|
|
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",
|
|
}}
|
|
/>
|
|
<BlurView intensity={10} style={styles.overlay} />
|
|
</View>
|
|
<View style={styles.content}>
|
|
{data.map((item, index) => (
|
|
<View style={styles.item} key={index}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center', gap: index == 1 ? 12 : 16, flex: 3 }}>
|
|
<View>
|
|
{
|
|
index == 0 ? <VideoTotalSvg width={20} height={20} /> : index == 1 ? <ImgTotalSvg width={24} height={24} /> : index == 2 ? <TimeTotalSvg width={20} height={20} /> : <LiveTotalSvg width={20} height={20} />
|
|
}
|
|
</View>
|
|
<ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
|
|
</View>
|
|
<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.4)',
|
|
backdropFilter: 'blur(5px)',
|
|
},
|
|
content: {
|
|
padding: 16,
|
|
justifyContent: "space-between",
|
|
flex: 1
|
|
},
|
|
titleContent: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
position: 'relative',
|
|
width: '100%',
|
|
},
|
|
title: {
|
|
color: 'white',
|
|
fontSize: 20,
|
|
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',
|
|
justifyContent: 'space-between',
|
|
paddingVertical: 8,
|
|
width: '100%',
|
|
},
|
|
itemTitle: {
|
|
color: 'white',
|
|
fontSize: 22,
|
|
fontWeight: '700',
|
|
marginLeft: 16,
|
|
flex: 1,
|
|
},
|
|
itemNumber: {
|
|
color: 'white',
|
|
fontSize: 28,
|
|
fontWeight: '700',
|
|
textAlign: 'left',
|
|
marginLeft: 8,
|
|
flex: 1,
|
|
paddingTop: 8
|
|
}
|
|
});
|
|
|
|
export default CategoryComponent;
|