update

src/screens/HitParade/HitParade.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, Pressable } from "react-native";
+import { View, Text, Image, Pressable, FlatList } from "react-native";
 import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background, icons } from "../../assets";
@@ -6,6 +6,9 @@ import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import { Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import BorderGradientButton from "../../components/BorderGradientButton";
+import SongCard from "./components/SongCard";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import PlaybacksCard from "./components/PlaybacksCard";
 
 const HitParade = () => {
   const [selected, setSelected] = useState("Chansons");
@@ -71,6 +74,36 @@ const HitParade = () => {
               />
             ))}
           </View>
+          {selected === "Chansons" && (
+            <FlatList
+              contentContainerStyle={{
+                gap: 10,
+                paddingBottom: responsiveHeight(20),
+              }}
+              data={Array.from({ length: 5 })}
+              renderItem={() => <SongCard />}
+            />
+          )}
+          {selected === "Playbacks" && (
+            <FlatList
+              contentContainerStyle={{
+                gap: 10,
+                paddingBottom: responsiveHeight(20),
+              }}
+              data={Array.from({ length: 5 })}
+              renderItem={() => <PlaybacksCard />}
+            />
+          )}
+          {selected === "Clips" && (
+            <FlatList
+              contentContainerStyle={{
+                gap: 10,
+                paddingBottom: responsiveHeight(20),
+              }}
+              data={Array.from({ length: 5 })}
+              renderItem={() => <PlaybacksCard />}
+            />
+          )}
         </View>
       </View>
     </Page>