103 lines
3.3 KiB
TypeScript
103 lines
3.3 KiB
TypeScript
import AtaverSvg from "@/assets/icons/svg/ataver.svg";
|
|
import OwnerSvg from "@/assets/icons/svg/owner.svg";
|
|
import { RankingItem } from "@/types/user";
|
|
import { useState } from "react";
|
|
import { Image, ScrollView, StyleSheet, View } from "react-native";
|
|
import { ThemedText } from "../ThemedText";
|
|
interface IRankList {
|
|
data: RankingItem[]
|
|
}
|
|
const RankList = (props: IRankList) => {
|
|
|
|
return (
|
|
<ScrollView
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={{ flexGrow: 1, paddingHorizontal: 16, marginTop: 16 }}
|
|
>
|
|
<View style={styles.item}>
|
|
<ThemedText style={styles.headerText}>Rank</ThemedText>
|
|
<ThemedText style={styles.headerText}>Username</ThemedText>
|
|
<ThemedText style={styles.headerText}>Profile</ThemedText>
|
|
</View>
|
|
{props.data?.filter((item, index) => index > 2).map((item, index) => (
|
|
<View
|
|
key={index}
|
|
style={[
|
|
styles.item,
|
|
{
|
|
borderBottomWidth: index === props.data.length - 1 ? 0 : 1,
|
|
position: index == 1 ? 'relative' : 'static',
|
|
}
|
|
]}
|
|
>
|
|
{index === 1 && (
|
|
<View style={styles.self} className="w-self">
|
|
<OwnerSvg width="100%" height="100%" />
|
|
</View>
|
|
)}
|
|
<ThemedText style={styles.itemRank}>{index + 1}</ThemedText>
|
|
<ThemedText style={styles.itemName}>{item.user_nick_name}</ThemedText>
|
|
<View style={{ opacity: index == 1 ? 0 : 1 }}>
|
|
{(() => {
|
|
const [imageError, setImageError] = useState(false);
|
|
|
|
if (!item.user_avatar_url || imageError) {
|
|
return <AtaverSvg width={40} height={40} />;
|
|
}
|
|
|
|
return (
|
|
<Image
|
|
source={{ uri: item.user_avatar_url }}
|
|
style={{ width: 40, height: 40, borderRadius: 40 }}
|
|
onError={() => setImageError(true)}
|
|
/>
|
|
);
|
|
})()}
|
|
</View>
|
|
</View>
|
|
))}
|
|
</ScrollView>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
},
|
|
headerText: {
|
|
fontSize: 14,
|
|
color: "#4C320C",
|
|
fontWeight: "600"
|
|
},
|
|
item: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: '#B48C64',
|
|
height: 70,
|
|
position: 'relative',
|
|
},
|
|
itemRank: {
|
|
fontSize: 14,
|
|
color: "#4C320C",
|
|
fontWeight: "700"
|
|
},
|
|
itemName: {
|
|
fontSize: 14,
|
|
color: "#AC7E35",
|
|
},
|
|
self: {
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: "100%",
|
|
left: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
right: 0,
|
|
zIndex: -1,
|
|
}
|
|
});
|
|
export default RankList;
|