playlist details

src/screens/Library/AllMyPlaylist.js

@@ -4,10 +4,12 @@ import { Image, Platform, Pressable, Text, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { background, icons } from "../../assets";
 import Page from "../../layouts/Page";
+import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette, Style } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { size } from "../../styles/Style";
-import { useUser } from "../../providers/UserDataProvider";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 const AllMyPlaylist = () => {
   const { userPlaylists = [] } = useUser();
   return (
@@ -23,7 +25,7 @@ const AllMyPlaylist = () => {
         >
           <Image
             source={icons.add}
-            style={size({ size: 18 })}
+            style={size({ size: 20 })}
             resizeMode="contain"
           />
         </Pressable>
@@ -35,42 +37,46 @@ const AllMyPlaylist = () => {
       <View style={{ flex: 1 }}>
         <View style={{ gap: 8 }}>
           {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
-            <View
-              style={{ borderRadius: 12, overflow: "hidden" }}
+            <Pressable
               key={item?.id}
+              onPress={() =>
+                navigate(Routes.PlaylistDetails, { playlistId: item?.id })
+              }
             >
-              <BlurView
-                intensity={20}
-                style={{
-                  ...Style.containerSpaceBetween,
-                  height: 59,
-                  paddingHorizontal: 10,
-                }}
-                experimentalBlurMethod={
-                  Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-                }
-              >
-                <Text
+              <View style={{ borderRadius: 12, overflow: "hidden" }}>
+                <BlurView
+                  intensity={20}
                   style={{
-                    fontSize: 16,
-                    color: Palette.white,
-                    fontFamily: FONT_FAMILY.InterRegular,
+                    ...Style.containerSpaceBetween,
+                    height: 59,
+                    paddingHorizontal: 10,
                   }}
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
                 >
-                  {item?.name || "Sans nom"}
-                </Text>
-                <Pressable>
-                  <Image
-                    source={icons.chevronDown}
+                  <Text
                     style={{
-                      ...size({ size: 15 }),
-                      transform: [{ rotate: "-90deg" }],
+                      fontSize: 16,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterRegular,
                     }}
-                    resizeMode="contain"
-                  />
-                </Pressable>
-              </BlurView>
-            </View>
+                  >
+                    {item?.name || "Sans nom"}
+                  </Text>
+                  <Pressable>
+                    <Image
+                      source={icons.chevronDown}
+                      style={{
+                        ...size({ size: 15 }),
+                        transform: [{ rotate: "-90deg" }],
+                      }}
+                      resizeMode="contain"
+                    />
+                  </Pressable>
+                </BlurView>
+              </View>
+            </Pressable>
           ))}
         </View>
       </View>