Philip Cesar Garay
142 lines
4.3 KiB
JavaScript
142 lines
4.3 KiB
JavaScript
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";
|
|
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={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={{
|
|
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 onPress={() => SheetManager.show("Playlist")}>
|
|
<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,
|
|
},
|
|
});
|