.

front/components/UI/MusicList.tsx

@@ -1,26 +1,63 @@
-import { FlatList, View } from "native-base";
+import { FlatList, HStack, View, useBreakpointValue, useTheme, Text, Row } from "native-base";
 import MusicItem, { MusicItemType } from "./MusicItem";
-import IconButton from "./IconButton";
 import React, { useState } from "react";
 import { ActivityIndicator } from "react-native";
-import { ArrowCircleDown, ArrowDown } from "iconsax-react-native";
+import { ArrowDown2, ArrowRotateLeft, Chart2, Cup, Icon } from "iconsax-react-native";
 import { StyleSheet } from 'react-native';
+import ButtonBase from "./ButtonBase";
+import useColorScheme from "../../hooks/colorScheme";
 
-type MusicListProps = {
-    musics: MusicItemType[];
+interface MusicItemTitleProps {
+	text: string;
+	icon: Icon;
+	isBigScreen: boolean;
 }
 
-const MusicList: React.FC<MusicListProps> = ({musics}) => {
-    const [musicData, setMusicData] = useState<MusicItemType[]>(musics);
+const MusicItemTitle = (props: MusicItemTitleProps) => {
+	const colorScheme = useColorScheme();
+
+	return (
+		<Row
+			style={{
+				display: 'flex',
+				flex: 1,
+				maxWidth: props.isBigScreen ? 150 : 50,
+				height: '100%',
+				alignItems: 'center',
+				justifyContent: props.isBigScreen ? 'flex-end' : 'center',
+			}}
+		>
+			{props.isBigScreen && (
+				<Text fontSize="lg" style={{ paddingRight: 8 }}>
+					{props.text}
+				</Text>
+			)}
+			<props.icon
+				size={18}
+				color={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'}
+			/>
+		</Row>
+	);
+};
+
+type MusicListProps = {
+  initialMusics: MusicItemType[];
+  loadMoreMusics: (page: number) => Promise<MusicItemType[]>; // fonction pour charger plus de musiques
+};
+
+const MusicList: React.FC<MusicListProps> = ({initialMusics}) => {
+    const [musicData, setMusicData] = useState<MusicItemType[]>(initialMusics);
     const [loading, setLoading] = useState(false);
-  
-    // Supposons que vous ayez une fonction pour charger plus de données (simulée ici avec un setTimeout).
+  	const { colors } = useTheme();
+    const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
+    const isSmallScreen = screenSize === 'small';
+    const isBigScreen = screenSize === 'xl';
+
     const loadMoreMusicItems = () => {
       if (!loading) {
         setLoading(true);
         setTimeout(() => {
           const moreItems: MusicItemType[] = [
-            // ... ajoutez de nouveaux éléments ici
           ];
           setMusicData((currentItems) => [...currentItems, ...moreItems]);
           setLoading(false);
@@ -29,41 +66,70 @@ const MusicList: React.FC<MusicListProps> = ({musics}) => {
     };
   
     return (
-      <View style={styles.container}>
-        <FlatList
-          data={musicData}
-          renderItem={({ item }) => (
-            <MusicItem
-              image={item.image}
-              liked={item.liked}
-              onLike={item.onLike}
-              onPlay={item.onPlay}
-              level={item.level}
-              lastScore={item.lastScore}
-              bestScore={item.bestScore}
-              artist={item.artist}
-              song={item.song}
-            />
+      <View>
+        <View style={styles.container}>
+          <HStack
+            space={isSmallScreen ? 1 : 2}
+            style={{
+              backgroundColor: colors.coolGray[500],
+              paddingHorizontal: isSmallScreen ? 8 : 16,
+              paddingVertical: 12,
+            }}
+          >
+            <Text
+              fontSize="lg"
+              style={{ flex: 4, width: '100%', justifyContent: 'center', paddingRight: 60 }}
+            >
+              Song
+            </Text>
+            {[
+              { text: 'level', icon: Chart2 },
+              { text: 'lastScore', icon: ArrowRotateLeft },
+              { text: 'BastScore', icon: Cup },
+            ].map((value) => (
+              <MusicItemTitle
+                key={value.text + 'key'}
+                text={value.text}
+                icon={value.icon}
+                isBigScreen={isBigScreen}
+              />
+            ))}
+          </HStack>
+          <FlatList
+            data={musicData}
+            renderItem={({ item }) => <MusicItem style={{marginBottom: 2}} {...item} />}
+            keyExtractor={(item) => item.artist + item.song}
+          />
+        </View>
+        <View style={styles.footerContainer}>
+          {loading ? (
+              <ActivityIndicator
+                color={colors.primary[300]}
+              />
+          ) : (
+              <ButtonBase
+                style={{borderRadius: 999}}
+                onPress={loadMoreMusicItems}
+                icon={ArrowDown2}
+              />
           )}
-          keyExtractor={(item) => item.artist + item.song}
-          ListFooterComponent={() => (
-            loading ? <ActivityIndicator size="large" color="#0000ff" /> : null
-          )}
-        />
-        <IconButton
-            onPress={loadMoreMusicItems}
-            color={"#000"}
-            icon={ArrowCircleDown}
-            />
+        </View>
       </View>
     );
-  };
-  
-  const styles = StyleSheet.create({
+};
+
+const styles = StyleSheet.create({
     container: {
       flex: 1,
+      gap: 2,
+      borderRadius: 10,
+      overflow: 'hidden',
     },
-    // Ajoutez d'autres styles si nécessaire.
-  });
-  
-  export default MusicList;
+    footerContainer : {
+      height: 60,
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+});
+
+export default MusicList;