update

src/screens/Library/components/CardContainer.js

@@ -3,12 +3,12 @@ import React from "react";
 import { Palette, Style } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 
-const CardContainer = ({ children, label = "" }) => {
+const CardContainer = ({ children, label = "", onPress }) => {
   return (
     <View style={{ gap: 12 }}>
       <View style={{ ...Style.containerSpaceBetween }}>
         <Text style={styles.label}>{label}</Text>
-        <Pressable>
+        <Pressable onPress={onPress}>
           <Text style={styles.seeAll}>Voir tout</Text>
         </Pressable>
       </View>

src/screens/Library/components/LikedMusic.js

@@ -3,10 +3,15 @@ import React from "react";
 import CardContainer from "./CardContainer";
 import { Style } from "../../../styles";
 import { img } from "../../../assets";
+import { navigate } from "../../../navigation/NavigationService";
+import { Routes } from "../../../navigation";
 
 const LikedMusic = () => {
   return (
-    <CardContainer label="Musiques likées">
+    <CardContainer
+      label="Musiques likées"
+      onPress={() => navigate(Routes.AllMyLikedMusic)}
+    >
       <FlatList
         scrollEnabled={false}
         data={Array.from({ length: 6 })}

src/screens/Library/components/MusicCard.js

@@ -6,15 +6,16 @@ import { size } from "../../../styles/Style";
 import { BlurView } from "expo-blur";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 
-const MusicCard = () => {
+const MusicCard = ({ onPress, onPressMore }) => {
   const [selected, setSelected] = useState(false);
 
   return (
-    <View
+    <Pressable
       style={{
         ...Style.containerRow,
         gap: 6,
       }}
+      onPress={onPress}
     >
       <Image
         source={img.placeholder2}
@@ -46,13 +47,13 @@ const MusicCard = () => {
                 resizeMode="contain"
               />
             </Pressable>
-            <Pressable>
+            <Pressable onPress={onPressMore}>
               <Image source={icons.more} />
             </Pressable>
           </View>
         </BlurView>
       </View>
-    </View>
+    </Pressable>
   );
 };
 

src/screens/Library/components/MyMusic.js

@@ -2,10 +2,15 @@ import { View } from "react-native";
 import React from "react";
 import CardContainer from "./CardContainer";
 import MusicCard from "./MusicCard";
+import { navigate } from "../../../navigation/NavigationService";
+import { Routes } from "../../../navigation";
 
 const MyMusic = () => {
   return (
-    <CardContainer label="Mes musiques">
+    <CardContainer
+      label="Mes musiques"
+      onPress={() => navigate(Routes.AllMyMusic)}
+    >
       <View style={{ gap: 10 }}>
         {Array.from({ length: 3 }).map((_, index) => (
           <MusicCard key={index} />

src/screens/Library/components/MyPlaylist.js

@@ -6,10 +6,15 @@ import { icons } from "../../../assets";
 import Style, { size } from "../../../styles/Style";
 import { Palette } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
+import { navigate } from "../../../navigation/NavigationService";
+import { Routes } from "../../../navigation";
 
 const MyPlaylist = () => {
   return (
-    <CardContainer label="Mes Playlists">
+    <CardContainer
+      label="Mes Playlists"
+      onPress={() => navigate(Routes.AllMyPlaylist)}
+    >
       <View style={{ gap: 8 }}>
         {["Musiques de lover", "Musiques triste"].map((item, index) => (
           <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>

src/screens/Library/components/ResearchHeader.js

@@ -0,0 +1,74 @@
+import { View, Text, Pressable, StyleSheet } from "react-native";
+import React from "react";
+import SearchBar from "../../../components/SearchBar";
+import { Palette, Style } from "../../../styles";
+import BorderGradient from "../../../components/BorderGradient/BorderGradient";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+
+const ResearchHeader = ({ onPress, selected }) => {
+  return (
+    <View style={{ gap: 12 }}>
+      <SearchBar />
+      <View
+        style={{
+          ...Style.containerRow,
+          gap: 6,
+        }}
+      >
+        {["Playbacks", "Clips", "Musiques", "Profils"].map((item, index) => (
+          <Pressable key={index} onPress={() => onPress(item)}>
+            <BorderGradient
+              gradientProps={{
+                colors:
+                  selected === item
+                    ? ["#F94697", "#7023F7"]
+                    : [Palette.tran, Palette.tran],
+                locations: [0, 1],
+                start: { x: 0, y: 0 },
+                end: { x: 1, y: 0 },
+              }}
+              style={styles.borderGradient}
+            />
+            <View style={styles.blurContainer}>
+              <BlurView intensity={20} style={styles.blurView}>
+                <Text style={styles.menu}>{item}</Text>
+              </BlurView>
+            </View>
+          </Pressable>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+export default ResearchHeader;
+
+const styles = StyleSheet.create({
+  menu: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  borderGradient: {
+    borderWidth: 1,
+    borderRadius: 100,
+    height: 30,
+    position: "absolute",
+    zIndex: 1,
+    width: "100%",
+  },
+  blurContainer: {
+    height: 30,
+    zIndex: -1,
+    borderRadius: 100,
+    overflow: "hidden",
+    backgroundColor: Palette.glass,
+  },
+  blurView: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    paddingHorizontal: 10,
+  },
+});