Front: Home View: Song Card Grid

front/components/SongCard.tsx

@@ -23,6 +23,7 @@ const SongCard = (props: SongCardProps) => {
 	return <Pressable onPress={() => navigation.navigate('Song', { songId })}>
 		{({ isHovered,  isFocused }) => (
 		<Box
+			shadow={3}
 			flexDirection='column'
 			alignContent='space-around'
 			bg={(isHovered || isFocused) ? 'coolGray.200' : undefined }

front/components/SongCardGrid.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import SongCard from './SongCard';
+import { FlatGrid } from 'react-native-super-grid';
+import { Heading, VStack } from 'native-base';
+
+type SongCardGrid = {
+	songs: Parameters<typeof SongCard>[0][];
+	maxItemPerRow?: number,
+	heading?: string
+}
+
+const SongCardGrid = (props: SongCardGrid) => {
+	return <VStack>
+		<Heading>{props.heading}</Heading>
+		<FlatGrid
+			maxItemsPerRow={props.maxItemPerRow ?? 5}
+			additionalRowStyle={{ justifyContent: 'space-between' }}
+			data={props.songs}
+			renderItem={({ item }) => <SongCard {...item} /> }
+			spacing={20}
+		/>
+	</VStack>
+	
+}
+
+export default SongCardGrid;

front/views/HomeView/HomeView.tsx

@@ -2,9 +2,11 @@ import React from "react";
 import { useQuery } from "react-query";
 import API from "../../API";
 import LoadingComponent from "../../components/Loading";
-import { Box, ScrollView, useBreakpointValue, Text, VStack, Progress, Button, HStack } from 'native-base';
+import { Box, ScrollView, useBreakpointValue, Text, Heading, VStack, Progress, Button, HStack, useTheme } from 'native-base';
 import SongCard from "../../components/SongCard";
 import { FlatGrid } from 'react-native-super-grid';
+import { useNavigation } from "@react-navigation/native";
+import SongCardGrid from '../../components/SongCardGrid'
 
 const ProgressBar = ({ xp }: { xp: number}) => {
 	const level = Math.floor(xp / 1000);
@@ -21,6 +23,8 @@ const ProgressBar = ({ xp }: { xp: number}) => {
 }
 
 const HomeView = () => {
+	const theme = useTheme();
+	const navigation = useNavigation();
 	const screenSize = useBreakpointValue({ base: 'small', md: "big"});
 	const flexDirection = useBreakpointValue({ base: 'column', xl: "row"});
 	const userQuery = useQuery(['user'], () => API.getUserInfo());
@@ -39,28 +43,42 @@ const HomeView = () => {
 			</Box>
 			<Box paddingY={5} style={{ flexDirection }}>
 				<Box flex={2}>
-					<Text fontSize="md">Passer à l'étape supérieure</Text>
+					<SongCardGrid
-					<FlatGrid
+						heading="Passer à l'étape supérieure"
-						maxItemsPerRow={screenSize === 'small' ? 2 : undefined}
+						songs={[ ...Array(4).keys() ].map(() => ({
-						data={[ ...Array(4).keys() ]}
+							albumCover: "",
-						renderItem={({ item }) =>
+							songTitle: "Song",
-							<SongCard albumCover={"https://meelo.arthichaud.me/api/illustrations/releases/120"} songTitle={"Song"} artistName={"Artist"}/>
+							artistName: "Artist",
-						}
+							songId: 1
-						spacing={20}
+						}))}
 					/>
-				</Box>
+					<Box style={{ flexDirection }}>
-				<VStack flex={1}>
+						<Box>
-					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
+							<SongCardGrid
-						<Button size="sm">Search</Button>
+								heading="Récemment joués"
+								songs={[ ...Array(4).keys() ].map(() => ({
+									albumCover: "",
+									songTitle: "Song",
+									artistName: "Artist",
+									songId: 1
+								}))}
+							/>
+						</Box>
 					</Box>
-					<Text fontSize="md">Dernière recherches</Text>
+				</Box>
-					<FlatGrid
+				<VStack flex={1} space={5}>
-						maxItemsPerRow={2}
+					<Box style={{ flexDirection: 'row', justifyContent:'center' }}>
-						data={[ ...Array(4).keys() ]}
+						<Button backgroundColor={theme.colors.secondary[600]} rounded={"full"} size="sm" onPress={() => navigation.navigate('Search')} >Search</Button>
-						renderItem={({ item }) =>
+					</Box>
-							<SongCard albumCover={"https://meelo.arthichaud.me/api/illustrations/releases/120"} songTitle={"Song"} artistName={"Artist"}/>
+					<SongCardGrid
-						}
+						maxItemPerRow={screenSize == 'big' ? 2 : undefined}
-						spacing={20}
+						heading="Dernieres recherches"
+						songs={[ ...Array(4).keys() ].map(() => ({
+							albumCover: "",
+							songTitle: "Song",
+							artistName: "Artist",
+							songId: 1
+						}))}
 					/>
 				</VStack>
 			</Box>