jinyaqiu
828e84710f
All checks were successful
Dev Deploy / Explore-Gitea-Actions (push) Successful in 24s
104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
import UserSvg from "@/assets/icons/svg/ataver.svg";
|
|
import FirstSvg from "@/assets/icons/svg/first.svg";
|
|
import SecondSvg from "@/assets/icons/svg/second.svg";
|
|
import ThirdSvg from "@/assets/icons/svg/third.svg";
|
|
import { RankingItem } from "@/types/user";
|
|
import { Image, StyleSheet, View } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
interface IPodium {
|
|
data: RankingItem[]
|
|
}
|
|
const PodiumComponent = ({ data }: IPodium) => {
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={[styles.item, { opacity: data[1]?.user_id ? 1 : 0 }]}>
|
|
<SecondSvg />
|
|
<View style={[styles.titleContainer, { backgroundColor: '#FFB645', borderTopRightRadius: 0, height: 60 }]}>
|
|
{
|
|
data[1]?.user_avatar_url
|
|
? <Image source={{ uri: data[1]?.user_avatar_url }} style={{ width: 30, height: 30, borderRadius: 30 }} />
|
|
: <UserSvg width={30} height={30} />
|
|
}
|
|
<ThemedText
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
style={styles.title}
|
|
>
|
|
{data[1]?.user_nick_name}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
<View style={[styles.item, { marginHorizontal: -16, opacity: data[0]?.user_id ? 1 : 0 }]}>
|
|
<FirstSvg />
|
|
<View style={[styles.titleContainer, { backgroundColor: '#E2793F', height: 90 }]}>
|
|
{
|
|
data[0]?.user_avatar_url
|
|
? <Image source={{ uri: data[0]?.user_avatar_url }} style={{ width: 40, height: 40, borderRadius: 40 }} />
|
|
: <UserSvg width={40} height={40} />
|
|
}
|
|
<ThemedText
|
|
numberOfLines={2}
|
|
ellipsizeMode="tail"
|
|
style={styles.title}
|
|
>
|
|
{data[0]?.user_nick_name}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
<View style={[styles.item, { opacity: data[2]?.user_id ? 1 : 0 }]}>
|
|
<ThirdSvg />
|
|
<View style={[styles.titleContainer, { backgroundColor: '#FFD18A', borderTopLeftRadius: 0, height: 50 }]}>
|
|
{
|
|
data[2]?.user_avatar_url
|
|
? <Image source={{ uri: data[2]?.user_avatar_url }} style={{ width: 20, height: 20, borderRadius: 20 }} />
|
|
: <UserSvg width={20} height={20} />
|
|
}
|
|
<ThemedText
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
style={styles.title}
|
|
>
|
|
{data[2]?.user_nick_name}
|
|
</ThemedText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-end',
|
|
justifyContent: 'center',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#B48C64',
|
|
},
|
|
item: {
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
color: '#fff',
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
paddingHorizontal: 4
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
marginTop: -29,
|
|
borderTopLeftRadius: 20,
|
|
borderTopRightRadius: 20,
|
|
width: 95,
|
|
paddingHorizontal: 4,
|
|
}
|
|
});
|
|
|
|
export default PodiumComponent;
|