update

src/screens/Library/AllMyLikedMusic.js

@@ -1,11 +1,18 @@
-import { View, Text } from "react-native";
-import React from "react";
+import { View, Text, Pressable } from "react-native";
+import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
-import { gutters } from "../../styles";
+import { gutters, Palette } from "../../styles";
 import MusicCard from "./components/MusicCard";
+import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { SheetManager } from "react-native-actions-sheet";
 
 const AllMyLikedMusic = () => {
+  const [top, setTop] = useState(0);
+  const [showMenu, setShowMenu] = useState(false);
+
   return (
     <Page
       headerType="NAVIGATION"
@@ -16,8 +23,65 @@ const AllMyLikedMusic = () => {
       <View style={{ flex: 1 }}>
         <View style={{ gap: 10 }}>
           {Array.from({ length: 3 }).map((_, index) => (
-            <MusicCard key={index} />
+            <MusicCard
+              key={index}
+              onPressMore={(posTop) => {
+                setTop(posTop);
+                if (showMenu) {
+                  if (posTop === top) {
+                    setShowMenu(false);
+                  } else {
+                    setShowMenu(false);
+                    setTimeout(() => {
+                      setShowMenu(true);
+                    }, 300);
+                  }
+                } else {
+                  setShowMenu(true);
+                }
+              }}
+            />
           ))}
+          {showMenu && (
+            <Animated.View
+              entering={FadeIn.duration(300).easing(Easing.ease)}
+              exiting={FadeOut.duration(300).easing(Easing.ease)}
+              style={{
+                position: "absolute",
+                right: 0,
+                top: top,
+                zIndex: 2,
+              }}
+            >
+              <Pressable
+                onPress={() => {
+                  setShowMenu(false);
+                  SheetManager.show("Delete");
+                }}
+              >
+                <BlurView
+                  intensity={20}
+                  style={{
+                    paddingHorizontal: 12,
+                    paddingVertical: 10,
+                    backgroundColor: Palette.glass,
+                    borderRadius: 12,
+                    overflow: "hidden",
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontSize: 14,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
+                    }}
+                  >
+                    Supprimer de la playlist
+                  </Text>
+                </BlurView>
+              </Pressable>
+            </Animated.View>
+          )}
         </View>
       </View>
     </Page>

src/screens/Library/MusicDetails.js

@@ -13,15 +13,31 @@ import { Palette } from "../../styles";
 import Style, { gutters, size } from "../../styles/Style";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import Slider from "../../components/Slider";
+import { useRoute } from "@react-navigation/core";
+import { SheetManager } from "react-native-actions-sheet";
 
 const MusicDetails = () => {
+  const params = useRoute().params;
+  const action = params?.action;
   const [fav, setFav] = useState(false);
 
   return (
     <Page
       headerType="NAVIGATION"
-      title="Recherche"
-      backgroundImg={background.libraryBG2}
+      title={action === "userProfile" ? "Mon profil" : "Recherche"}
+      backgroundImg={
+        action === "userProfile" ? background.profileBG : background.libraryBG2
+      }
+      {...(action === "userProfile" && {
+        containerStyle: {
+          backgroundColor: "#0000004D",
+        },
+        rightComponent: () => (
+          <Pressable onPress={() => SheetManager.show("DeleteAudio")}>
+            <Image source={icons.trash} />
+          </Pressable>
+        ),
+      })}
     >
       <ScrollView
         contentContainerStyle={{

src/screens/Library/components/MusicCard.js

@@ -1,5 +1,5 @@
 import { View, Text, Image, Pressable, StyleSheet } from "react-native";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Palette, Style } from "../../../styles";
 import { icons, img } from "../../../assets";
 import { size } from "../../../styles/Style";
@@ -8,52 +8,82 @@ import { FONT_FAMILY } from "../../../styles/Fonts";
 
 const MusicCard = ({ onPress, onPressMore }) => {
   const [selected, setSelected] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [layout, setLayout] = useState(null);
+  const [menuPos, setMenuPos] = useState(0);
+
+  useEffect(() => {
+    if (layout) {
+      const top = layout?.y + 45;
+      setMenuPos(top);
+    }
+  }, [layout]);
+
+  const onPressMenu = () => {
+    onPressMore?.(menuPos);
+  };
 
   return (
-    <Pressable
-      style={{
-        ...Style.containerRow,
-        gap: 6,
-      }}
-      onPress={onPress}
-    >
-      <Image
-        source={img.placeholder2}
-        style={{ ...size({ size: 60 }), borderRadius: 12 }}
-      />
-      <View style={styles.blurContainer}>
-        <BlurView
-          intensity={20}
-          style={{
-            flex: 1,
-            ...Style.containerSpaceBetween,
-            paddingHorizontal: 8,
-          }}
-        >
-          <View>
-            <Text style={styles.title}>Alors on danse</Text>
-            <Text style={styles.subTitle}>Stromae</Text>
-          </View>
-          <View
+    <>
+      <Pressable
+        style={{
+          ...Style.containerRow,
+          gap: 6,
+        }}
+        onPress={onPress}
+        onLayout={(e) => setLayout(e.nativeEvent.layout)}
+      >
+        <Image
+          source={img.placeholder2}
+          style={{ ...size({ size: 60 }), borderRadius: 12 }}
+        />
+        <View style={styles.blurContainer}>
+          <BlurView
+            intensity={20}
             style={{
-              ...Style.containerRow,
-              gap: 12,
+              flex: 1,
+              ...Style.containerSpaceBetween,
+              paddingHorizontal: 8,
             }}
           >
-            <Pressable onPress={() => setSelected(!selected)}>
-              <Image
-                source={selected ? icons.heart : icons.heartOutline}
-                style={size({ size: 24 })}
-                resizeMode="contain"
-              />
-            </Pressable>
-            <Pressable onPress={onPressMore}>
-              <Image source={icons.more} />
-            </Pressable>
-          </View>
-        </BlurView>
-      </View>
-    </Pressable>
+            <View>
+              <Text style={styles.title}>Alors on danse</Text>
+              <Text style={styles.subTitle}>Stromae</Text>
+            </View>
+            <View
+              style={{
+                ...Style.containerRow,
+                gap: 12,
+              }}
+            >
+              <Pressable onPress={() => setSelected(!selected)}>
+                <Image
+                  source={selected ? icons.heart : icons.heartOutline}
+                  style={size({ size: 24 })}
+                  resizeMode="contain"
+                />
+              </Pressable>
+              <Pressable onPress={onPressMenu}>
+                <Image source={icons.more} />
+              </Pressable>
+            </View>
+          </BlurView>
+        </View>
+      </Pressable>
+      {/* {open && (
+        <View
+          style={{
+            width: 100,
+            height: 50,
+            backgroundColor: "red",
+            position: "absolute",
+            right: 0,
+            top: menuPos,
+            zIndex: 2,
+          }}
+        />
+      )} */}
+    </>
   );
 };
 
@@ -76,4 +106,7 @@ const styles = StyleSheet.create({
     color: Palette.white,
     fontFamily: FONT_FAMILY.InterRegular,
   },
+  filterContainer: {
+    backgroundColor: Palette.tran,
+  },
 });

src/screens/Notifications.js

@@ -1,92 +0,0 @@
-import React, { useEffect } from "reactn";
-import { Text, View, FlatList } from "react-native";
-import { useDataFromRef } from "react-native-minuit/src/hooks";
-import moment from "moment";
-import { Motion } from "@legendapp/motion";
-
-import Page from "../layouts/Page";
-
-import { Fonts, Style } from "../styles";
-import { notificationsRef } from "../config/firebase";
-
-import { LoaderIndicator } from "../providers/LoadingProvider";
-
-export default (props) => {
-  const baseNotificationRef = notificationsRef;
-
-  useEffect(() => {
-    markAsRead();
-  }, []);
-
-  const markAsRead = async () => {
-    try {
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const {
-    data: notificationList,
-    loading,
-    loadMore,
-  } = useDataFromRef({
-    ref: baseNotificationRef.orderBy("timestamp", "desc"),
-    usePagination: true,
-    batchSize: 40,
-    documentID: "notificationID",
-  });
-
-  return (
-    <Page headerType="NAVIGATE" title="Notifications">
-      <FlatList
-        removeClippedSubviews={true}
-        estimatedItemSize={100}
-        showsVerticalScrollIndicator={false}
-        data={notificationList}
-        renderItem={({ item, index }) => {
-          const { title = "", timestamp } = item;
-
-          const randomDuration = Math.floor(Math.random() * 1000) + 500;
-
-          return (
-            <Motion.Pressable
-              key={index}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{
-                opacity: {
-                  type: "tween",
-                  duration: randomDuration,
-                },
-              }}
-              style={Style.containerSpaceBetween}
-              onPress={() => {}}
-            >
-              <View style={Style.containerRow}>
-                <Text
-                  numberOfLines={2}
-                  style={Fonts({ style: { width: "100%" } })}
-                >
-                  {title}
-                </Text>
-              </View>
-
-              <Text style={Fonts({ style: { opacity: 0.5 } })}>
-                {moment(timestamp.toDate()).format("[Le] DD/MM [à] HH:mm")}
-              </Text>
-            </Motion.Pressable>
-          );
-        }}
-        keyExtractor={(item) =>
-          `Notifications_${item.notificationID}_${item.projectID}`
-        }
-        ItemSeparatorComponent={() => (
-          <View style={{ ...Style.separatorHorizontal }} />
-        )}
-        ListFooterComponent={loading ? <LoaderIndicator /> : null}
-        onEndReached={loadMore}
-        onEndReachedThreshold={0.5}
-      />
-    </Page>
-  );
-};

src/screens/Profile/ChangeEmailAddress.js

@@ -0,0 +1,49 @@
+import { View } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import EditInput from "./components/EditInput";
+import GradientButton from "../../components/GradientButton";
+
+const ChangeEmailAddress = () => {
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingHorizontal: 20,
+            paddingVertical: 23,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: Palette.glass,
+          }}
+        >
+          <EditInput placeholder="Adresse mail" label="Adresse mail" />
+        </BlurView>
+      </View>
+      <GradientButton
+        title="Enregistrer les modifications"
+        containerStyle={{
+          width: "80%",
+          alignSelf: "center",
+        }}
+      />
+    </Page>
+  );
+};
+
+export default ChangeEmailAddress;

src/screens/Profile/ChangePassword.js

@@ -0,0 +1,66 @@
+import { View, Text, Pressable } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import EditInput from "./components/EditInput";
+import GradientButton from "../../components/GradientButton";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const ChangePassword = () => {
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingHorizontal: 20,
+            paddingVertical: 16,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: Palette.glass,
+            gap: 4,
+          }}
+        >
+          <EditInput
+            placeholder="Mot de passe"
+            label="Mot de passe"
+            type="password"
+          />
+          <Pressable>
+            <Text
+              style={{
+                fontSize: 12,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+              }}
+            >
+              Mot de passe oublié?
+            </Text>
+          </Pressable>
+        </BlurView>
+      </View>
+      <GradientButton
+        title="Enregistrer les modifications"
+        containerStyle={{
+          width: "80%",
+          alignSelf: "center",
+        }}
+      />
+    </Page>
+  );
+};
+
+export default ChangePassword;

src/screens/Profile/EditProfile.js

@@ -0,0 +1,72 @@
+import { View, Text, Image, TextInput } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { BlurView } from "expo-blur";
+import Style, { size } from "../../styles/Style";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { goBack } from "../../navigation/NavigationService";
+import EditInput from "./components/EditInput";
+
+const EditProfile = () => {
+  return (
+    <Page
+      headerType="NAVIGATE"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingVertical: 14,
+            backgroundColor: Palette.glass,
+            paddingHorizontal: 20,
+            borderRadius: 20,
+            overflow: "hidden",
+            gap: 24,
+          }}
+        >
+          <View style={{ alignItems: "center" }}>
+            <Image
+              source={img.profile}
+              style={{
+                ...size({ size: 108 }),
+                borderRadius: 100,
+              }}
+            />
+            <Text
+              style={{
+                fontSize: 14,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
+              }}
+            >
+              Modifier la photo
+            </Text>
+          </View>
+          <EditInput label="Pseudo" placeholder="Pseudo" />
+
+          <GradientButton
+            title="Enregistrer les modifications"
+            containerStyle={{
+              width: "80%",
+              alignSelf: "center",
+            }}
+            onPress={goBack}
+          />
+        </BlurView>
+      </View>
+    </Page>
+  );
+};
+
+export default EditProfile;

src/screens/Profile/Language.js

@@ -0,0 +1,96 @@
+import { View, Text, Pressable } from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import Style, { size } from "../../styles/Style";
+
+const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];
+
+const Language = () => {
+  const [selected, setSelected] = useState("Français");
+
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            paddingVertical: 10,
+            paddingHorizontal: 20,
+            backgroundColor: Palette.glass,
+            gap: 10,
+            borderRadius: 20,
+            overflow: "hidden",
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 20,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+            }}
+          >
+            Langue
+          </Text>
+          <View style={{ gap: 12 }}>
+            {LANGUAGE.map((item, index) => (
+              <Pressable
+                key={index}
+                style={{
+                  ...Style.containerRow,
+                  gap: 6,
+                }}
+                onPress={() => setSelected(item)}
+              >
+                <View
+                  style={{
+                    ...size({ size: 17 }),
+                    ...Style.containerCenter,
+                    borderWidth: 1,
+                    borderRadius: 100,
+                    borderColor: Palette.white,
+                  }}
+                >
+                  {selected === item && (
+                    <View
+                      style={{
+                        ...size({ size: 9 }),
+                        borderRadius: 100,
+                        backgroundColor: Palette.white,
+                      }}
+                    />
+                  )}
+                </View>
+                <Text
+                  style={{
+                    fontSize: 16,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  }}
+                >
+                  {item}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+        </BlurView>
+      </View>
+    </Page>
+  );
+};
+
+export default Language;

src/screens/Profile/Notifications.js

@@ -0,0 +1,65 @@
+import React from "reactn";
+import Page from "../../layouts/Page";
+import { gutters, Palette, Style } from "../../styles";
+import { background } from "../../assets";
+import { Text, View } from "react-native";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import Switch from "../../components/Switch";
+import { useState } from "react";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+export default (props) => {
+  const [isSwitch, setIsSwitch] = useState(false);
+
+  return (
+    <Page
+      headerType="NAVIGATE"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 4,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <BlurView
+          intensity={20}
+          style={{
+            gap: 12,
+            paddingVertical: 15,
+            paddingHorizontal: 20,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: Palette.glass,
+          }}
+        >
+          <View style={Style.containerSpaceBetween}>
+            <Text
+              style={{
+                fontSize: 20,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.HelveticaNeueMedium,
+              }}
+            >
+              Notifications
+            </Text>
+            <Switch value={isSwitch} setValue={setIsSwitch} />
+          </View>
+          <Text
+            style={{
+              fontSize: 12,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.InterRegular,
+            }}
+          >
+            Nous t’encourageons à activer les notifications pour découvrir les
+            derniers classements, les nouveaux sons et les meilleurs playbacks.
+          </Text>
+        </BlurView>
+      </View>
+    </Page>
+  );
+};

src/screens/Profile/Profile.js

@@ -1,12 +1,229 @@
-import { View, Text } from "react-native";
-import React from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  Image,
+  FlatList,
+  StyleSheet,
+} from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background, icons, img } from "../../assets";
+import { BlurView } from "expo-blur";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import Style, { gutters, size } from "../../styles/Style";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import MusicCard from "../Library/components/MusicCard";
+import { SheetManager } from "react-native-actions-sheet";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 
 const Profile = () => {
+  const [selected, setSelected] = useState("Chansons");
+
+  const onPressMenu = (item) => {
+    setSelected(item);
+  };
+
   return (
-    <View>
-      <Text>Profile</Text>
-    </View>
+    <Page
+      backgroundImg={background.profileBG}
+      headerType="NAVIGATE"
+      hideBackButton
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+      rightComponent={() => (
+        <Pressable onPress={() => SheetManager.show("ProfileSettings")}>
+          <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,
+          }}
+        >
+          {["Chansons", "Playbacks", "Clips"].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={() => (
+                <Pressable
+                  style={{ flex: 1, gap: 6 }}
+                  onPress={() => navigate(Routes.Reels)}
+                >
+                  <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>
+                </Pressable>
+              )}
+            />
+          </View>
+        )}
+        {selected === "Chansons" && (
+          <View style={{ flex: 1 }}>
+            <FlatList
+              data={Array.from({ length: 3 })}
+              contentContainerStyle={{
+                gap: 10,
+              }}
+              renderItem={() => (
+                <MusicCard
+                  onPress={() =>
+                    navigate(Routes.MusicDetails, {
+                      action: "userProfile",
+                    })
+                  }
+                />
+              )}
+            />
+          </View>
+        )}
+      </View>
+    </Page>
   );
 };
 
 export default Profile;
+
+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/Profile/Reels.js

@@ -0,0 +1,85 @@
+import { View, Text, Pressable, Image } from "react-native";
+import React, { useState } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { icons, img } from "../../assets";
+import Style, { gutters, size } from "../../styles/Style";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { goBack } from "../../navigation/NavigationService";
+import { SheetManager } from "react-native-actions-sheet";
+
+const Reels = () => {
+  const { top } = useSafeAreaInsets();
+  const [isFav, setIsFav] = useState(false);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View
+        style={{
+          ...Style.containerRow,
+          position: "absolute",
+          top: top + 10,
+          zIndex: 1,
+          paddingHorizontal: gutters,
+        }}
+      >
+        <View style={{ flex: 1 }}>
+          <Pressable onPress={goBack}>
+            <Image
+              source={icons.chevronDown}
+              style={{
+                ...size({ size: 15 }),
+                transform: [{ rotate: "90deg" }],
+              }}
+              resizeMode="contain"
+            />
+          </Pressable>
+        </View>
+        <Text
+          style={{
+            fontSize: 16,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          Mon Profile
+        </Text>
+        <View style={{ flex: 1, alignItems: "flex-end" }}>
+          <Pressable onPress={() => SheetManager.show("DeletePlayback")}>
+            <Image source={icons.trash} />
+          </Pressable>
+        </View>
+      </View>
+      <Image
+        source={img.placeholder3}
+        style={{ width: "100%", height: "100%" }}
+      />
+      <View
+        style={{
+          position: "absolute",
+          zIndex: 1,
+          bottom: gutters * 2,
+          right: 33,
+          gap: 20,
+        }}
+      >
+        <Pressable onPress={() => setIsFav(!isFav)}>
+          <Image
+            source={isFav ? icons.heart : icons.heartOutline}
+            style={size({ size: 26 })}
+            resizeMode="contain"
+          />
+        </Pressable>
+        <Pressable>
+          <Image
+            source={icons.share}
+            style={size({ size: 26 })}
+            resizeMode="contain"
+          />
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
+export default Reels;

src/screens/Profile/Settings.js

@@ -0,0 +1,82 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import { gutters, Palette } from "../../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import BlurItemButton from "../../components/BlurItemButton";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import { SheetManager } from "react-native-actions-sheet";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const SETTINGS = [
+  {
+    title: "Adresse mail",
+    action: () => {
+      navigate(Routes.ChangeEmailAddress);
+    },
+  },
+  {
+    title: "Modifier mon mot de passe",
+    action: () => {
+      navigate(Routes.ChangePassword);
+    },
+  },
+  {
+    title: "Notifications",
+    action: () => {
+      navigate(Routes.Notifications);
+    },
+  },
+  {
+    title: "Langue",
+    action: () => {
+      navigate(Routes.Language);
+    },
+  },
+  {
+    title: "Gérer mon abonnement",
+    action: () => {},
+  },
+];
+
+const Settings = () => {
+  return (
+    <Page
+      headerType="NAVIGATION"
+      title="Paramètres"
+      backgroundImg={background.profileBG}
+      contentContainerStyle={{
+        paddingBottom: gutters * 2,
+      }}
+      containerStyle={{
+        backgroundColor: "#0000004D",
+      }}
+    >
+      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
+        <View style={{ flex: 1, gap: 10 }}>
+          {SETTINGS.map((item, index) => (
+            <BlurItemButton
+              key={index}
+              title={item.title}
+              onPress={item.action}
+            />
+          ))}
+        </View>
+        <View style={{ width: "80%", gap: 5, alignSelf: "center" }}>
+          <BorderGradientButton title="Déconnexion" />
+          <BorderGradientButton
+            title="Supprimer mon profil"
+            titleStyle={{
+              color: Palette.red,
+            }}
+            onPress={() => SheetManager.show("DeleteAccount")}
+          />
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default Settings;

src/screens/Profile/components/EditInput.js

@@ -0,0 +1,72 @@
+import { View, Text, TextInput, Image, Pressable } from "react-native";
+import React, { useState } from "react";
+import { Palette, Style } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+import { BlurView } from "expo-blur";
+import { icons } from "../../../assets";
+
+const EditInput = ({ label = "", placeholder = "", type = "default" }) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <View style={{ gap: 4 }}>
+      <View
+        style={{
+          ...Style.containerSpaceBetween,
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 16,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          {label}
+        </Text>
+        <Text
+          style={{
+            fontSize: 12,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+          }}
+        >
+          Modifier
+        </Text>
+      </View>
+      <BlurView
+        intensity={20}
+        style={{
+          paddingHorizontal: 12,
+          borderRadius: 12,
+          backgroundColor: Palette.glass,
+          overflow: "hidden",
+          height: 52,
+          ...Style.containerRow,
+        }}
+      >
+        <TextInput
+          placeholder={placeholder}
+          placeholderTextColor={Palette.gray}
+          style={{
+            fontSize: 16,
+            color: Palette.white,
+            fontFamily: FONT_FAMILY.InterRegular,
+            flex: 1,
+          }}
+          keyboardType={type}
+          {...(type === "password" && {
+            secureTextEntry: !showPassword,
+          })}
+        />
+        {type === "password" && (
+          <Pressable onPress={() => setShowPassword(!showPassword)}>
+            <Image source={icons.eye} />
+          </Pressable>
+        )}
+      </BlurView>
+    </View>
+  );
+};
+
+export default EditInput;

src/screens/Settings.js

@@ -1,191 +0,0 @@
-import React, { useRef, useContext, useGlobal } from "reactn";
-import { Text, View } from "react-native";
-
-import { WebViewContext } from "../providers/WebViewProvider";
-import { useUserData } from "../providers/UserDataProvider";
-
-import Page from "../layouts/Page";
-
-import { Routes } from "../navigation";
-import { responsiveHeight } from "../actions/responsiveSizes.js";
-
-import ItemRowList from "../components/ItemRowList";
-import BottomSheetContainer from "../components/BottomSheetContainer.js";
-import IconSelector from "../components/IconSelector.js";
-
-import useLayoutType from "../hooks/useLayoutType";
-
-import { Fonts, Palette, Style, gutters } from "../styles";
-import { icons } from "../assets";
-
-import { onStoreReview, openLinkInBrowser } from "../helpers";
-import {
-  agencyWhatsAppNumber,
-  calendlyUrl,
-  instagramUrl,
-  termsOfSalesUrl,
-} from "../data";
-import IconContainer from "../components/IconContainer.js";
-
-export default ({ navigation }) => {
-  const { isDesktop, isWeb, isNative } = useLayoutType();
-  const { onSignOut } = useUserData();
-
-  const [currentProjectID] = useGlobal("currentProjectID");
-
-  const { setWebViewUrl } = useContext(WebViewContext);
-
-  const appIconBottomSheetRef = useRef(null);
-
-  const settingsList = [
-    {
-      sectionTitle: "Projet",
-      icon: icons.tools,
-      optionList: [
-        {
-          title: "Paramètres",
-          action: () => navigation.navigate(Routes.ProjectSettings),
-        },
-      ],
-      condition: currentProjectID,
-    },
-    {
-      sectionTitle: "Compte",
-      icon: icons.user,
-      optionList: [
-        {
-          title: "Paramètres du compte",
-          action: () => navigation.navigate(Routes.AccountSettings),
-        },
-      ],
-    },
-    {
-      sectionTitle: "Support",
-      icon: icons.support,
-      optionList: [
-        {
-          title: "Prendre rendez-vous",
-          action: () => setWebViewUrl(calendlyUrl),
-        },
-        {
-          title: "Nous suivre sur Instagram",
-          action: () => setWebViewUrl(instagramUrl),
-        },
-        {
-          title: "Nous contacter sur WhatsApp",
-          action: () => {
-            openLinkInBrowser({
-              url: `http://api.whatsapp.com/send/?phone=${agencyWhatsAppNumber}&text&type=phone_number`,
-            });
-          },
-        },
-        {
-          title: "Changer l'icône de l'application",
-          action: () => {
-            appIconBottomSheetRef.current?.expand();
-          },
-          condition: isNative,
-        },
-        {
-          title: "Noter l'application",
-          action: () => {
-            onStoreReview();
-          },
-          condition: !isWeb,
-        },
-      ],
-    },
-    {
-      sectionTitle: "Légal",
-      icon: icons.law,
-      optionList: [
-        {
-          title: "Conditions générales d'utilisation",
-          action: () => navigation.navigate(Routes.TermsOfUse),
-        },
-        {
-          title: "Conditions générales de vente",
-          action: () => setWebViewUrl(termsOfSalesUrl),
-        },
-        {
-          title: "Politique de confidentialité",
-          action: () => navigation.navigate(Routes.PrivacyPolicy),
-        },
-        {
-          title: "Se déconnecter",
-          action: async () => {
-            await onSignOut();
-          },
-          textStyle: { color: Palette.red },
-          addMarginTopFromPrevious: true,
-        },
-      ],
-    },
-  ]
-    .filter(({ condition = true }) => condition)
-    .filter(
-      ({ optionList }) =>
-        optionList.filter(({ condition }) => !condition || condition).length > 0
-    );
-
-  return (
-    <>
-      <Page
-        headerType={isDesktop ? "NONE" : "BASE"}
-        scrollEnabled
-        pageTitle="Paramètres"
-        contentContainerStyle={{
-          paddingTop: gutters / 2,
-          paddingBottom: responsiveHeight(50),
-        }}
-      >
-        {settingsList.map(
-          ({ icon, sectionTitle = "", optionList = [] }, index) => (
-            <View
-              key={index}
-              style={{ ...Style.containerItem, marginBottom: gutters / 2 }}
-            >
-              <View
-                style={{
-                  ...Style.containerRow,
-                }}
-              >
-                <IconContainer icon={icon} />
-
-                <Text
-                  style={Fonts({
-                    type: "title",
-                    color: Palette.white,
-                    style: {},
-                  })}
-                >
-                  {sectionTitle}
-                </Text>
-              </View>
-
-              {optionList
-                .filter(({ condition = true }) => condition)
-                .map((item, index) => (
-                  <ItemRowList
-                    key={index}
-                    {...item}
-                    containerStyle={{}}
-                    separatorPosition="top"
-                  />
-                ))}
-            </View>
-          )
-        )}
-      </Page>
-
-      <BottomSheetContainer
-        bottomSheetRef={appIconBottomSheetRef}
-        index={-1}
-        enablePanDownToClose
-        snapPoints={["80%"]}
-      >
-        <IconSelector onClose={() => appIconBottomSheetRef.current?.close()} />
-      </BottomSheetContainer>
-    </>
-  );
-};