diff --git a/src/components/AppCheckbox.js b/src/components/AppCheckbox.js
new file mode 100644
index 0000000..856aadd
--- /dev/null
+++ b/src/components/AppCheckbox.js
@@ -0,0 +1,48 @@
+import { View, Text, Pressable } from "react-native";
+import React from "react";
+import { Palette, Style } from "../styles";
+import { size } from "../styles/Style";
+import { FONT_FAMILY } from "../styles/Fonts";
+
+const AppCheckbox = ({ onPress, selected, label }) => {
+ return (
+
+
+ {selected && (
+
+ )}
+
+
+ {label}
+
+
+ );
+};
+
+export default AppCheckbox;
diff --git a/src/components/modal/PlaylistModal.js b/src/components/modal/PlaylistModal.js
new file mode 100644
index 0000000..b3f18e5
--- /dev/null
+++ b/src/components/modal/PlaylistModal.js
@@ -0,0 +1,163 @@
+import {
+ View,
+ Text,
+ FlatList,
+ Pressable,
+ Image,
+ Dimensions,
+ TextInput,
+} from "react-native";
+import React, { useRef, useState } from "react";
+import AppActionSheet from "../AppActionSheet";
+import AppCheckbox from "../AppCheckbox";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { icons } from "../../assets";
+import Style, { size } from "../../styles/Style";
+import SwiperFlatList from "react-native-swiper-flatlist";
+import GradientButton from "../GradientButton";
+import { SheetManager } from "react-native-actions-sheet";
+
+const PLAYLIST = ["Ménage", "Voiture", "Roadtrip"];
+
+const { width } = Dimensions.get("window");
+
+const PlaylistModal = () => {
+ const scrollRef = useRef(null);
+ const [selected, setSelected] = useState("");
+ const [playlist, setPlaylist] = useState("");
+
+ return (
+
+
+
+
+
+ Ajouter ce titre à une playlist
+
+
+ scrollRef.current.scrollToIndex({
+ index: 1,
+ animated: true,
+ })
+ }
+ >
+
+
+ Créer une nouvelle playlist
+
+
+ }
+ renderItem={({ item }) => (
+ setSelected(item)}
+ selected={selected === item}
+ />
+ )}
+ />
+ SheetManager.hide("Playlist")}
+ />
+
+
+
+
+ {
+ scrollRef.current.scrollToIndex({
+ index: 0,
+ animated: true,
+ });
+ setPlaylist("");
+ }}
+ >
+
+ Annuler
+
+
+
+
+ Nommer la playlist
+
+
+
+ {
+ scrollRef.current.scrollToIndex({
+ index: 0,
+ animated: true,
+ });
+ setPlaylist("");
+ }}
+ />
+
+
+
+
+ );
+};
+
+export default PlaylistModal;
diff --git a/src/screens/Library/MusicDetails.js b/src/screens/Library/MusicDetails.js
index 90ca6cf..05bbbb3 100644
--- a/src/screens/Library/MusicDetails.js
+++ b/src/screens/Library/MusicDetails.js
@@ -62,7 +62,7 @@ const MusicDetails = () => {
resizeMode="contain"
/>
-
+ SheetManager.show("Playlist")}>
{
{LANGUAGE.map((item, index) => (
- setSelected(item)}
- >
-
- {selected === item && (
-
- )}
-
-
- {item}
-
-
+ selected={selected === item}
+ />
))}
diff --git a/src/utils/Sheet.js b/src/utils/Sheet.js
index 3eb8c30..1ac8bf8 100644
--- a/src/utils/Sheet.js
+++ b/src/utils/Sheet.js
@@ -4,11 +4,13 @@ import ProfileSettingsModal from "../components/modal/ProfileSettingsModal";
import DeleteAccountModal from "../components/modal/DeleteAccountModal";
import DeletePlaybackModal from "../components/modal/DeletePlaybackModal";
import DeleteAudioModal from "../components/modal/DeleteAudioModal";
+import PlaylistModal from "../components/modal/PlaylistModal";
registerSheet("Delete", DeleteModal);
registerSheet("ProfileSettings", ProfileSettingsModal);
registerSheet("DeleteAccount", DeleteAccountModal);
registerSheet("DeletePlayback", DeletePlaybackModal);
registerSheet("DeleteAudio", DeleteAudioModal);
+registerSheet("Playlist", PlaylistModal);
export {};