ill be baaack

front/views/HomeView.tsx

@@ -136,6 +136,12 @@ const HomeView = () => {
 							size="sm"
 							onPress={() => navigation.navigate('Settings')}
 						/>
+						<TextButton
+							translate={{ translationKey: 'leaderboardTitle' }}
+							colorScheme="primary"
+							size="sm"
+							onPress={() => navigation.navigate('Leaderboard')}
+						/>
 						<TextButton
 							label={'V2'}
 							colorScheme="gray"

front/views/LeaderboardView.tsx

@@ -3,28 +3,32 @@ import { View, Image } from 'react-native';
 import { useQuery } from 'react-query';
 import User from '../models/User';
 import API from '../API';
+import { Ionicons } from '@expo/vector-icons';
 
-const PodiumUserCardComponent = () => {
+type PodiumCardProps = {
+	offset: number;
+	medalColor: string;
+}
+
+const PodiumCardComponent = ({offset, medalColor}: PodiumCardProps) => {
 	return (
 		<View
 			style={{
 				display: 'flex',
-				paddingTop: 60,
+				paddingTop: 0 + offset,
 				flexDirection: 'column',
 				justifyContent: 'center',
 				alignItems: 'center',
+				marginLeft: 32
 			}}
 		>
-
-			<View
+			<View /** image + medal container*/
 				style={{
 					width: 140,
 					height: 140,
-					flexShrink: 0,
-					borderRadius: 12,
 				}}
 			>
-				<Image 
+				<Image
 					source={{
 						uri: 'https://picsum.photos/140/140',
 					}}
@@ -32,54 +36,132 @@ const PodiumUserCardComponent = () => {
 						aspectRatio: 1,
 						width: '100%',
 						height: '100%',
-						flexShrink: 1,
+						flexShrink: 0,
+						borderRadius: 12,
 					}}
 				/>
-				<Text
-					style={{
-						color: '#FFF',
-						fontFamily: 'Lexend',
-						fontSize: 16,
-						fontStyle: 'normal',
-						fontWeight: '500',
-					}}
-				>
-
-				</Text>
+				<Ionicons style={{position: 'absolute', top: 106, left: 106}} name='medal' size={24} color={medalColor} />
 			</View>
+			<Text mt={4} style={{
+					fontSize: 16,
+					fontStyle: 'normal',
+					fontWeight: '500',
+				}}
+			>
+				Momo
+			</Text>
+			<Text mt={1} style={{
+					fontSize: 16,
+					fontStyle: 'normal',
+					fontWeight: '500',
+				}}
+			>
+				2400 LVL
+			</Text>
 		</View>
 	);
 }
 
-const boardRowComponent = () => {
+const BoardRowComponent = () => {
 	return (
-		<View>
-
-		</View>
-	);
-}
-
-const Leaderboardiew = () => {st 
-	con
-	return (
-		<View
-			style={{
-				width: '100%',
-				height: '100%',
+		<View style={{
+				margin: 5,
 				display: 'flex',
-				flexDirection: 'column',
+				flexDirection: 'row',
+				alignItems: 'center',
+				alignSelf: 'stretch',
+				borderRadius: 8,
+				backgroundColor: 'rgba(16, 16, 20, 0.50)',
+				shadowColor: 'rgba(0, 0, 0, 0.25)',
+				shadowOffset: { width: 0, height: 4 },
+				shadowOpacity: 1,
+				shadowRadius: 4,
+				marginTop: 10
 			}}
 		>
 			<View
+				style={{
+						width: 50,
+						height: 50,
+				}}
+			>
+				<Image
+					source={{
+						uri: 'https://picsum.photos/50/50',
+					}}
+					style={{width: '100%', height: '100%'}}
+				/>
+			</View>
+
+			<Text
+				style={{
+					fontSize: 16,
+					fontStyle: 'normal',
+					fontWeight: '500',
+				}}
+			>
+				Momo est boutain
+			</Text>
+			<Text
+				style={{
+					fontSize: 16,
+					fontStyle: 'normal',
+					fontWeight: '500',
+				}}
+			>
+				200 LVL
+			</Text>
+		</View>
+	);
+}
+
+const dummyScores = [
+	{
+		id: 1
+	},
+	{
+		id: 2
+	},
+	{
+		id: 3
+	},
+	{
+		id: 4
+	},
+	{
+		id: 5
+	},
+]
+
+const Leaderboardiew = () => {
+	return (
+		<View
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'flex-start',
+				flex: 1, flexGrow: 1, flexShrink: 0, flexBasis: 0,
+				alignSelf: 'stretch',
+			}}
+		>
+			<View /** podium view */
 				style={{
 					display: 'flex',
 					paddingBottom: 0,
 					justifyContent: 'center',
 					alignItems: 'center',
 					alignSelf: 'stretch',
+					flexDirection: 'row',
+					marginBottom: 20
 				}}
 			>
+				<PodiumCardComponent medalColor='#AE84FB' offset={80}/>
+				<PodiumCardComponent medalColor='#EAD93C' offset={0}/>
+				<PodiumCardComponent medalColor='#5F74F7' offset={60}/>
 			</View>
+			{dummyScores.map((comp, index) => (
+				<BoardRowComponent/>
+			))}
 		</View>
 	);
 }