140 lines
5.1 KiB
TypeScript
140 lines
5.1 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 { useState } from "react";
|
|
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 }]}>
|
|
{
|
|
(() => {
|
|
const [imageError, setImageError] = useState(false);
|
|
|
|
if (!data[1]?.user_avatar_url || imageError) {
|
|
return <UserSvg width={30} height={30} />;
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
source={{ uri: data[1].user_avatar_url }}
|
|
style={{ width: 30, height: 30, borderRadius: 30 }}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
);
|
|
})()
|
|
}
|
|
<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 }]}>
|
|
{
|
|
(() => {
|
|
const [imageError, setImageError] = useState(false);
|
|
|
|
if (!data[0]?.user_avatar_url || imageError) {
|
|
return <UserSvg width={40} height={40} />;
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
source={{ uri: data[0].user_avatar_url }}
|
|
style={{ width: 40, height: 40, borderRadius: 40 }}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
);
|
|
})()
|
|
}
|
|
<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 }]}>
|
|
{
|
|
(() => {
|
|
const [imageError, setImageError] = useState(false);
|
|
|
|
if (!data[2]?.user_avatar_url || imageError) {
|
|
return <UserSvg width={20} height={20} />;
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
source={{ uri: data[2].user_avatar_url }}
|
|
style={{ width: 20, height: 20, borderRadius: 20 }}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
);
|
|
})()
|
|
}
|
|
<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;
|