update

App.js

@@ -21,6 +21,7 @@ import { Palette } from "./src/styles";
 import { navigationRef, reset } from "./src/navigation/NavigationService";
 
 import initialGlobalState from "./src/config/initialGlobalState";
+import { MenuProvider } from 'react-native-popup-menu';
 
 import firebase from "./src/config/firebase";
 import Providers from "./src/providers";
@@ -117,26 +118,28 @@ const App = () => {
       >
         <PortalProvider>
           <Providers>
-            <AppLayout currentUID={currentUID}>
+            <MenuProvider>
-              <NavigationContainer
+              <AppLayout currentUID={currentUID}>
-                theme={{
+                <NavigationContainer
-                  ...DefaultTheme,
+                  theme={{
-                  colors: {
+                    ...DefaultTheme,
-                    ...DefaultTheme.colors,
+                    colors: {
-                    background: Palette.darkPurple,
+                      ...DefaultTheme.colors,
-                  },
+                      background: Palette.darkPurple,
-                }}
+                    },
-                ref={navigationRef}
+                  }}
-                documentTitle={{
+                  ref={navigationRef}
-                  formatter: (options) =>
+                  documentTitle={{
-                    options?.title
+                    formatter: (options) =>
-                      ? `${options?.title} - minuit.starter`
+                      options?.title
-                      : "minuit.starter",
+                        ? `${options?.title} - minuit.starter`
-                }}
+                        : "minuit.starter",
-              >
+                  }}
-                <MainStack />
+                >
-              </NavigationContainer>
+                  <MainStack />
-            </AppLayout>
+                </NavigationContainer>
+              </AppLayout>
+            </MenuProvider>
           </Providers>
         </PortalProvider>
       </GestureHandlerRootView>

package.json

@@ -75,6 +75,7 @@
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-minuit": "^1.3.52",
+    "react-native-popup-menu": "^0.18.0",
     "react-native-reanimated": "~3.16.1",
     "react-native-reanimated-carousel": "^4.0.3",
     "react-native-responsive-dimensions": "^3.1.1",

src/assets/index.js

@@ -79,6 +79,8 @@ import close from "./icons/close.png";
 import heart from "./icons/heart.png";
 import heartOutline from "./icons/heartOutline.png";
 import more from "./icons/more.png";
+import forward from "./icons/forward.png";
+import pause from "./icons/pause.png";
 
 export const icons = {
   bell,
@@ -135,6 +137,8 @@ export const icons = {
   heart,
   heartOutline,
   more,
+  forward,
+  pause,
 };
 
 import triangle from "./art/triangle.png";
@@ -186,6 +190,8 @@ import productionBG2 from "./UI/productionBG2.png";
 import playbackBG from "./UI/playbackBG.png";
 import playbackBG2 from "./UI/playbackBG2.png";
 import libraryBG from "./UI/libraryBG.png";
+import libraryBG2 from "./UI/libraryBG2.png";
+import profileBG from "./UI/profileBG.png";
 
 export const background = {
   writingBG,
@@ -196,6 +202,8 @@ export const background = {
   playbackBG,
   playbackBG2,
   libraryBG,
+  libraryBG2,
+  profileBG,
 };
 
 import nathalie from "./UI/nathalie.png";
@@ -213,9 +221,13 @@ export const ai = {
 import placeholder from "./UI/placeholder.jpg";
 import placeholder2 from "./UI/placeholder2.jpg";
 import placeholder3 from "./UI/placeholder3.png";
+import placeholder4 from "./UI/placeholder4.jpg";
+import profile from "./UI/profile.jpg";
 
 export const img = {
   placeholder,
   placeholder2,
   placeholder3,
+  placeholder4,
+  profile,
 };

src/components/NavigateHeader.js

@@ -2,14 +2,16 @@ import { Image, Pressable, View } from "react-native";
 import { Motion } from "@legendapp/motion";
 
 import { icons } from "../assets";
-import { Fonts, gutters, Style } from "../styles";
+import { Fonts, gutters, Palette, Style } from "../styles";
 import { goBack } from "../navigation/NavigationService";
+import { FONT_FAMILY } from "../styles/Fonts";
 
 export default ({
   title = "",
   rightComponent = null,
   onBackPressed = null,
   containerStyle = {},
+  headerTitleStyle = {},
 }) => {
   return (
     <View
@@ -18,47 +20,50 @@ export default ({
         {
           alignItems: "flex-start",
           marginBottom: gutters / 2,
+          paddingTop: 10,
           ...containerStyle,
         },
       ]}
     >
-      <Pressable onPress={() => onBackPressed?.() || goBack()}>
+      <View style={{ flex: 1 }}>
-        <Image
+        <Pressable onPress={() => onBackPressed?.() || goBack()}>
-          source={icons.arrowRight}
+          <Image
-          style={[Style.iconDefault, Style.mirrorHorizontal]}
+            source={icons.chevronDown}
-        />
+            style={[
-      </Pressable>
+              Style.iconSmall,
+              Style.mirrorHorizontal,
+              { transform: [{ rotate: "90deg" }] },
+            ]}
+            resizeMode="contain"
+          />
+        </Pressable>
+      </View>
 
-      {typeof title === "function" ? (
+      <Motion.Text
-        title()
+        initial={{ opacity: 0 }}
-      ) : title?.length > 0 ? (
+        animate={{ opacity: 1 }}
-        <Motion.Text
+        exit={{ opacity: 0.2 }}
-          initial={{ opacity: 0 }}
+        transition={{
-          animate={{ opacity: 1 }}
+          default: {
-          exit={{ opacity: 0.2 }}
+            type: "spring",
-          transition={{
+          },
-            default: {
+          opacity: {
-              type: "spring",
+            type: "timing",
-            },
+          },
-            opacity: {
+        }}
-              type: "timing",
+        style={{
-            },
+          fontSize: 16,
-          }}
+          color: Palette.white,
-          style={Fonts({
+          fontFamily: FONT_FAMILY.InterRegular,
-            type: "navigationTitle",
+          ...headerTitleStyle,
-            style: {
+        }}
-              fontSize:
+      >
-                title.length > 15
+        {title}
-                  ? Fonts({ type: "section" }).fontSize
+      </Motion.Text>
-                  : Fonts({ type: "navigationTitle" }).fontSize,
-            },
-          })}
-        >
-          {title}
-        </Motion.Text>
-      ) : null}
 
-      <View>{rightComponent?.() || null}</View>
+      <View style={{ flex: 1, alignItems: "flex-end" }}>
+        {rightComponent?.() || null}
+      </View>
     </View>
   );
 };

src/components/SearchBar.js

@@ -6,7 +6,10 @@ import Style, { size } from "../styles/Style";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 
-const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => {
+const SearchBar = ({
+  placeholder = "Que souhaites-tu écouter?",
+  textInputProps = {},
+}) => {
   return (
     <View style={{ borderRadius: 12, overflow: "hidden" }}>
       <BlurView
@@ -28,6 +31,7 @@ const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => {
             fontFamily: FONT_FAMILY.HelveticaNeueRegular,
             flex: 1,
           }}
+          {...textInputProps}
         />
       </BlurView>
     </View>

src/layouts/Page.js

@@ -35,6 +35,7 @@ export default ({
 
   onBackPressed = null,
   backgroundImg = background.writingBG,
+  headerTitleStyle = {},
 }) => {
   const { currentUID } = useUserData();
 
@@ -76,15 +77,10 @@ export default ({
           ) : (
             <NavigateHeader
               containerStyle={{ ...headerStyle }}
-              title={
+              title={title}
-                typeof title === "function"
-                  ? title
-                  : scrollPosition > 50
-                  ? title
-                  : ""
-              }
               rightComponent={rightComponent}
               onBackPressed={onBackPressed}
+              headerTitleStyle={headerTitleStyle}
             />
           )
         ) : null}
@@ -103,20 +99,6 @@ export default ({
               }
             : {})}
         >
-          {scrollEnabled && typeof title === "string" && title.length > 0 && (
-            <Motion.Text
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              style={[
-                Fonts({
-                  type: "title",
-                }),
-                { marginBottom: 2 * gutters },
-              ]}
-            >
-              {title}
-            </Motion.Text>
-          )}
           {children}
         </ContentContainer>
       </PageContainer>

src/navigation/MainStack.js

@@ -45,6 +45,12 @@ import RecordedPlayback from "../screens/Playback/RecordedPlayback";
 import ChooseDecor from "../screens/Playback/ChooseDecor";
 import CreatingDecor from "../screens/Playback/CreatingDecor";
 import VideoFinalize from "../screens/Playback/VideoFinalize";
+import AllMyMusic from "../screens/Library/AllMyMusic";
+import AllMyPlaylist from "../screens/Library/AllMyPlaylist";
+import AllMyLikedMusic from "../screens/Library/AllMyLikedMusic";
+import Research from "../screens/Library/Research";
+import MusicDetails from "../screens/Library/MusicDetails";
+import SingerProfile from "../screens/Profile/SingerProfile";
 
 const screenOptions = {
   headerShown: false,
@@ -208,6 +214,30 @@ const screens = [
     name: Routes.VideoFinalize,
     component: VideoFinalize,
   },
+  {
+    name: Routes.AllMyMusic,
+    component: AllMyMusic,
+  },
+  {
+    name: Routes.AllMyPlaylist,
+    component: AllMyPlaylist,
+  },
+  {
+    name: Routes.AllMyLikedMusic,
+    component: AllMyLikedMusic,
+  },
+  {
+    name: Routes.Research,
+    component: Research,
+  },
+  {
+    name: Routes.MusicDetails,
+    component: MusicDetails,
+  },
+  {
+    name: Routes.SingerProfile,
+    component: SingerProfile,
+  },
 ];
 
 export default function Main() {

src/navigation/Routes.js

@@ -60,6 +60,14 @@ export const Routes = {
   Create: "Create",
   HitParade: "HitParade",
   Playbacks: "Playbacks",
+
   Library: "Library",
+  AllMyMusic: "AllMyMusic",
+  AllMyPlaylist: "AllMyPlaylist",
+  AllMyLikedMusic: "AllMyLikedMusic",
+  Research: "Research",
+  MusicDetails: "MusicDetails",
+
   Profile: "Profile",
+  SingerProfile: "SingerProfile",
 };

src/screens/Library/AllMyLikedMusic.js

@@ -0,0 +1,27 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters } from "../../styles";
+import MusicCard from "./components/MusicCard";
+
+const AllMyLikedMusic = () => {
+  return (
+    <Page
+      headerType="NAVIGATION"
+      backgroundImg={background.libraryBG}
+      title="Musiques de lover"
+      contentContainerStyle={{ paddingBottom: gutters * 2 }}
+    >
+      <View style={{ flex: 1 }}>
+        <View style={{ gap: 10 }}>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <MusicCard key={index} />
+          ))}
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default AllMyLikedMusic;

src/screens/Library/AllMyMusic.js

@@ -0,0 +1,73 @@
+import { View, Text, FlatList, Image, Pressable } from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { gutters, Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import useLayoutType from "../../hooks/useLayoutType";
+
+const AllMyMusic = () => {
+  const [containerLayout, setContainerLayout] = useState(null);
+  const { isWeb } = useLayoutType();
+
+  return (
+    <Page
+      backgroundImg={background.libraryBG}
+      headerType="NAVIGATION"
+      title="Mes musiques"
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+    >
+      <View
+        style={{ flex: 1 }}
+        onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
+      >
+        <CreateLyricsHeader
+          containerStyle={{
+            maxHeight: containerLayout?.height,
+            zIndex: 1,
+          }}
+          blurViewStyle={{
+            zIndex: 2,
+            ...(isWeb && { flex: 1 }),
+          }}
+          gradientProps={{
+            start: { x: 0, y: 0 },
+            end: { x: 0, y: 1 },
+          }}
+        >
+          <FlatList
+            data={Array.from({ length: 9 })}
+            numColumns={3}
+            columnWrapperStyle={{ gap: 10 }}
+            contentContainerStyle={{ gap: 14 }}
+            renderItem={() => (
+              <Pressable
+                style={{ flex: 1, gap: 4 }}
+                onPress={() => console.log("PRESSED")}
+              >
+                <Image
+                  source={img.placeholder2}
+                  style={{ width: "100%", height: 114, borderRadius: 8 }}
+                />
+                <Text
+                  style={{
+                    fontSize: 12,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  Voiture
+                </Text>
+              </Pressable>
+            )}
+          />
+        </CreateLyricsHeader>
+      </View>
+    </Page>
+  );
+};
+
+export default AllMyMusic;

src/screens/Library/AllMyPlaylist.js

@@ -0,0 +1,65 @@
+import { View, Text, Image, Pressable } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background, icons } from "../../assets";
+import { gutters, Palette, Style } from "../../styles";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { size } from "../../styles/Style";
+
+const AllMyPlaylist = () => {
+  return (
+    <Page
+      headerType="NAVIGATION"
+      backgroundImg={background.libraryBG}
+      title="Mes Playlists"
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+    >
+      <View style={{ flex: 1 }}>
+        <View style={{ gap: 8 }}>
+          {[
+            "Musiques de lover",
+            "Musiques triste",
+            "Happy new year",
+            "Happy songs",
+          ].map((item, index) => (
+            <View style={{ borderRadius: 12, overflow: "hidden" }} key={index}>
+              <BlurView
+                intensity={20}
+                style={{
+                  ...Style.containerSpaceBetween,
+                  height: 59,
+                  paddingHorizontal: 10,
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: 16,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  {item}
+                </Text>
+                <Pressable>
+                  <Image
+                    source={icons.chevronDown}
+                    style={{
+                      ...size({ size: 15 }),
+                      transform: [{ rotate: "-90deg" }],
+                    }}
+                    resizeMode="contain"
+                  />
+                </Pressable>
+              </BlurView>
+            </View>
+          ))}
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default AllMyPlaylist;

src/screens/Library/Library.js

@@ -1,4 +1,4 @@
-import { View, Image, ScrollView } from "react-native";
+import { View, Image, ScrollView, Pressable } from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { background, icons } from "../../assets";
@@ -11,13 +11,21 @@ import LikedPlayback from "./components/LikedPlayback";
 import LikedClips from "./components/LikedClips";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import MyPlaylist from "./components/MyPlaylist";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 
 const Library = () => {
   return (
     <Page backgroundImg={background.libraryBG} headerType="NONE">
       <View style={{ gap: 17, paddingBottom: 20 }}>
         <Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
-        <SearchBar />
+        <Pressable onPress={() => navigate(Routes.Research)}>
+          <SearchBar
+            textInputProps={{
+              editable: false,
+            }}
+          />
+        </Pressable>
       </View>
       <View style={{ flex: 1 }}>
         <ScrollView

src/screens/Library/MusicDetails.js

@@ -0,0 +1,125 @@
+import {
+  View,
+  Text,
+  ScrollView,
+  Image,
+  Pressable,
+  StyleSheet,
+} from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, icons, img } from "../../assets";
+import { Palette } from "../../styles";
+import Style, { gutters, size } from "../../styles/Style";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import Slider from "../../components/Slider";
+
+const MusicDetails = () => {
+  const [fav, setFav] = useState(false);
+
+  return (
+    <Page
+      headerType="NAVIGATION"
+      title="Recherche"
+      backgroundImg={background.libraryBG2}
+    >
+      <ScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          paddingTop: 20,
+          paddingBottom: gutters * 2,
+        }}
+        // stickyHeaderIndices={[1]}
+      >
+        <View style={{ gap: 28 }}>
+          <Image source={img.placeholder4} style={styles.img} />
+          <View style={{ ...Style.containerSpaceBetween }}>
+            <View>
+              <Text style={styles.title}>Lust for Life</Text>
+              <Text style={styles.name}>Lana del Rey</Text>
+            </View>
+            <View style={{ ...Style.containerRow, gap: 12 }}>
+              <Pressable onPress={() => setFav(!fav)}>
+                <Image
+                  source={fav ? icons.heart : icons.heartOutline}
+                  style={{ ...size({ size: 24 }) }}
+                  resizeMode="contain"
+                />
+              </Pressable>
+              <Pressable>
+                <Image
+                  source={icons.check}
+                  style={{ ...size({ size: 24 }) }}
+                  resizeMode="contain"
+                />
+              </Pressable>
+            </View>
+          </View>
+        </View>
+        <View style={{ paddingTop: 22 }}>
+          <Slider value={"0:00"} maxValue={"2:00"} />
+          <View style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}>
+            <Pressable>
+              <Image source={icons.forward} />
+            </Pressable>
+            <Pressable>
+              <Image source={icons.pause} />
+            </Pressable>
+            <Pressable>
+              <Image
+                source={icons.forward}
+                style={{ transform: [{ rotate: "180deg" }] }}
+              />
+            </Pressable>
+          </View>
+        </View>
+        <View style={{ marginTop: 30, gap: 20 }}>
+          <Text
+            style={{
+              fontSize: 14,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+            }}
+          >
+            Description chanson. Viverra enim risus enim enim placerat. Integer
+            pulvinar tristique suscipit risus. Id hendrerit in odio phasellus
+            interdum lectus amet
+          </Text>
+          <Text
+            style={{
+              fontSize: 16,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+            }}
+          >
+            Allô{"\n"}Écoute maman est près de toi{"\n"}Il faut lui dire "maman,
+            c'est quelqu'un pour toi"{"\n"}Ah, c'est le monsieur de la dernière
+            fois{"\n"}Bon, je vais la chercher{"\n"}Je crois qu'elle est dans
+            son bain{"\n"}Et je sais pas si elle va pouvoir venir
+          </Text>
+        </View>
+      </ScrollView>
+    </Page>
+  );
+};
+
+export default MusicDetails;
+
+const styles = StyleSheet.create({
+  img: {
+    width: 292,
+    height: 290,
+    borderRadius: 24,
+    alignSelf: "center",
+  },
+  title: {
+    fontSize: 20,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+  },
+  name: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+  },
+});

src/screens/Library/Research.js

@@ -0,0 +1,145 @@
+import {
+  View,
+  Text,
+  StyleSheet,
+  Pressable,
+  ScrollView,
+  Image,
+} from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import { gutters, Palette, Style } from "../../styles";
+import SearchBar from "../../components/SearchBar";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import { BlurView } from "expo-blur";
+import ResearchHeader from "./components/ResearchHeader";
+import MusicCard from "./components/MusicCard";
+import { size } from "../../styles/Style";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const Research = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressMenu = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
+  return (
+    <Page
+      headerType="NAVIGATION"
+      backgroundImg={background.libraryBG2}
+      title="Recherche"
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+    >
+      <View style={{ flex: 1, gap: 10 }}>
+        <ResearchHeader
+          onPress={(item) => onPressMenu(item)}
+          selected={selected}
+        />
+        <View style={{ flex: 1 }}>
+          <ScrollView contentContainerStyle={{ paddingTop: 2 }}>
+            {(!selected || selected === "Musiques") && (
+              <View style={{ paddingHorizontal: 2 }}>
+                <CreateLyricsHeader
+                  gradientProps={{
+                    start: { x: 0, y: 0 },
+                    end: { x: 0, y: 1 },
+                  }}
+                >
+                  <View style={{ gap: 10 }}>
+                    {Array.from({ length: 3 }).map((_, index) => (
+                      <MusicCard
+                        key={index}
+                        onPress={() => navigate(Routes.MusicDetails)}
+                      />
+                    ))}
+                  </View>
+                </CreateLyricsHeader>
+              </View>
+            )}
+            {(!selected || selected === "Clips") && (
+              <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
+                <CreateLyricsHeader
+                  gradientProps={{
+                    start: { x: 0, y: 0 },
+                    end: { x: 0, y: 1 },
+                  }}
+                >
+                  <View style={{ gap: 6, ...Style.containerRow }}>
+                    {Array.from({ length: 3 }).map((_, index) => (
+                      <View style={{ flex: 1, gap: 6 }} key={index}>
+                        <Image
+                          source={img.placeholder3}
+                          style={{
+                            width: "100%",
+                            height: 147,
+                            borderRadius: 10,
+                          }}
+                        />
+                        <Text
+                          style={{
+                            fontSize: 12,
+                            color: Palette.white,
+                            fontFamily: FONT_FAMILY.InterRegular,
+                          }}
+                        >
+                          Pour Lili
+                        </Text>
+                      </View>
+                    ))}
+                  </View>
+                </CreateLyricsHeader>
+              </View>
+            )}
+            {(!selected || selected === "Profils") && (
+              <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
+                <CreateLyricsHeader
+                  gradientProps={{
+                    start: { x: 0, y: 0 },
+                    end: { x: 0, y: 1 },
+                  }}
+                >
+                  <View style={{ gap: 8 }}>
+                    {Array.from({ length: 2 }).map((_, index) => (
+                      <Pressable
+                        style={{ gap: 14, ...Style.containerRow }}
+                        key={index}
+                        onPress={() => navigate(Routes.SingerProfile)}
+                      >
+                        <Image
+                          source={img.profile}
+                          style={{ ...size({ size: 60 }), borderRadius: 100 }}
+                        />
+                        <Text
+                          style={{
+                            fontSize: 12,
+                            color: Palette.white,
+                            fontFamily: FONT_FAMILY.InterRegular,
+                          }}
+                        >
+                          ReggaetonLil
+                        </Text>
+                      </Pressable>
+                    ))}
+                  </View>
+                </CreateLyricsHeader>
+              </View>
+            )}
+          </ScrollView>
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Research;

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,
+  },
+});

src/screens/Profile/Profile.js

@@ -0,0 +1,12 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+const Profile = () => {
+  return (
+    <View>
+      <Text>Profile</Text>
+    </View>
+  );
+};
+
+export default Profile;

src/screens/Profile/SingerProfile.js

@@ -0,0 +1,218 @@
+import {
+  View,
+  Text,
+  Pressable,
+  Image,
+  StyleSheet,
+  FlatList,
+} from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, icons, img } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { BlurView } from "expo-blur";
+import Style, { size } from "../../styles/Style";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import MusicCard from "../Library/components/MusicCard";
+
+const SingerProfile = () => {
+  const [selected, setSelected] = useState(null);
+
+  const onPressMenu = (item) => {
+    if (selected === item) {
+      setSelected(null);
+    } else {
+      setSelected(item);
+    }
+  };
+
+  return (
+    <Page
+      backgroundImg={background.profileBG}
+      headerType="NAVIGATE"
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+      rightComponent={() => (
+        <Pressable>
+          <Image source={icons.more} />
+        </Pressable>
+      )}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
+        <View style={{ borderRadius: 20, overflow: "hidden" }}>
+          <BlurView
+            intensity={20}
+            style={{
+              paddingVertical: 14,
+              backgroundColor: Palette.glass,
+              paddingHorizontal: 20,
+            }}
+          >
+            <View style={{ alignItems: "center" }}>
+              <Image
+                source={img.profile}
+                style={{
+                  ...size({ size: 108 }),
+                  borderRadius: 100,
+                }}
+              />
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
+                elia.mrn
+              </Text>
+            </View>
+            <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
+              <View style={{ flex: 1, alignItems: "center" }}>
+                <Text style={styles.value}>0</Text>
+                <Text style={styles.label}>playbacks</Text>
+              </View>
+              <View style={{ flex: 1, alignItems: "center" }}>
+                <Text style={styles.value}>880</Text>
+                <Text style={styles.label}>abonnés</Text>
+              </View>
+              <View style={{ flex: 1, alignItems: "center" }}>
+                <Text style={styles.value}>6</Text>
+                <Text style={styles.label}>abonnements</Text>
+              </View>
+            </View>
+            <GradientButton
+              title="Suivre"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+                marginTop: 18,
+              }}
+            />
+          </BlurView>
+        </View>
+        <View
+          style={{
+            ...Style.containerRow,
+            gap: 6,
+          }}
+        >
+          {["Playbacks", "Clips", "Chansons"].map((item, index) => (
+            <Pressable
+              key={index}
+              onPress={() => onPressMenu(item)}
+              style={{ flex: 1 }}
+            >
+              <BorderGradient
+                gradientProps={{
+                  colors:
+                    selected === item
+                      ? ["#FFFFFF00", "#FFFFFF"]
+                      : [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>
+        {selected === "Playbacks" && (
+          <View style={{ flex: 1 }}>
+            <FlatList
+              data={Array.from({ length: 6 })}
+              numColumns={3}
+              contentContainerStyle={{ gap: 14 }}
+              columnWrapperStyle={{ gap: 10 }}
+              renderItem={() => (
+                <View style={{ flex: 1, gap: 6 }}>
+                  <Image
+                    source={img.placeholder3}
+                    style={{
+                      width: "100%",
+                      height: 147,
+                      borderRadius: 10,
+                    }}
+                  />
+                  <Text
+                    style={{
+                      fontSize: 12,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    Pour Lili
+                  </Text>
+                </View>
+              )}
+            />
+          </View>
+        )}
+        {selected === "Chansons" && (
+          <View style={{ flex: 1 }}>
+            <FlatList
+              data={Array.from({ length: 3 })}
+              contentContainerStyle={{
+                gap: 10,
+              }}
+              renderItem={() => <MusicCard />}
+            />
+          </View>
+        )}
+      </View>
+    </Page>
+  );
+};
+
+export default SingerProfile;
+
+const styles = StyleSheet.create({
+  value: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  label: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  menu: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  borderGradient: {
+    borderWidth: 1,
+    borderRadius: 10,
+    height: 33,
+    position: "absolute",
+    zIndex: 1,
+    width: "100%",
+  },
+  blurContainer: {
+    height: 33,
+    zIndex: -1,
+    borderRadius: 10,
+    overflow: "hidden",
+    backgroundColor: Palette.glass,
+  },
+  blurView: {
+    width: "100%",
+    height: "100%",
+    paddingHorizontal: 10,
+    ...Style.containerCenter,
+  },
+});

src/screens/Writing/components/CreateLyricsHeader.js

@@ -16,6 +16,7 @@ const CreateLyricsHeader = ({
   tint = "dark",
   containerStyle = {},
   onPress,
+  blurViewStyle = {},
 }) => {
   const [onLayout, setOnLayout] = useState(null);
   const { isWeb } = useLayoutType();
@@ -33,11 +34,12 @@ const CreateLyricsHeader = ({
         style={{
           height: isWeb ? onLayout?.height + 2 : onLayout?.height,
           top: isWeb ? -1 : 0,
-          right: isWeb ? -1 : 0,
           borderWidth: 1,
           borderRadius: containerStyle?.borderRadius ?? 18,
           position: "absolute",
-          width: "100%",
+          width: isWeb ? onLayout?.width + 2 : onLayout?.width,
+          left: -1,
+          alignSelf: "center",
         }}
       />
       <View
@@ -58,6 +60,7 @@ const CreateLyricsHeader = ({
             paddingHorizontal: 12,
             paddingVertical: 8,
             gap: 4,
+            ...blurViewStyle,
           }}
         >
           {title && (

yarn.lock

@@ -7402,6 +7402,11 @@ react-native-modalbox@^2.0.2:
   dependencies:
     prop-types "^15.5.10"
 
+react-native-popup-menu@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/react-native-popup-menu/-/react-native-popup-menu-0.18.0.tgz#723c4df6b790ee3cc92ae698e7e5844ee1a170f9"
+  integrity sha512-XD3gyp/hwL5YWw2J034DerfvbJ6S2YHqAzvqAFRU+UGnFD4JyTqggfm4UyynBD26O1PDoRb45Loil+NZCGfCnA==
+
 react-native-reanimated-carousel@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-4.0.3.tgz#975f4ff3f5da5bb3790fe60850a46ad8119612bc"