update

src/screens/Production/DownloadSongs.js

@@ -1,12 +1,106 @@
-import { View, Text } from "react-native";
+import { View, Text, StyleSheet, Image, Pressable } from "react-native";
 import React from "react";
+import Page from "../../layouts/Page";
+import { background, img } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { size } from "../../styles/Style";
+import { BlurView } from "expo-blur";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { Routes } from "../../navigation";
 
 const DownloadSongs = () => {
   return (
-    <View>
-      <Text>DownloadSongs</Text>
-    </View>
+    <Page backgroundImg={background.productionBG2} headerType="NONE">
+      <MusicLandHeader onPressBack={goBack} progress={50} />
+      <View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
+        <CreateLyricsHeader
+          gradientProps={{
+            start: { x: 0, y: 0 },
+            end: { x: 0, y: 1 },
+          }}
+        >
+          <Image
+            source={img.placeholder2}
+            style={{
+              ...size({ size: 158 }),
+              borderRadius: 13,
+              alignSelf: "center",
+            }}
+          />
+          <View style={{ gap: 12, paddingVertical: 12 }}>
+            <Text style={styles.title}>Prêt à télécharger ta chanson ?</Text>
+            <View style={{ gap: 10 }}>
+              <Pressable
+                style={styles.itemContainer}
+                onPress={() => navigate(Routes.DownloadPrices)}
+              >
+                <BlurView style={styles.blurView} intensity={40} tint="dark">
+                  <Text style={styles.label}>Télécharger ma chanson</Text>
+                  <Text style={styles.description}>Pour moi uniquement</Text>
+                </BlurView>
+              </Pressable>
+              <Pressable
+                style={styles.itemContainer}
+                onPress={() => navigate(Routes.StreamSong)}
+              >
+                <BlurView style={styles.blurView} intensity={40} tint="dark">
+                  <Text style={styles.label}>
+                    Diffuser ma chanson sur la plateforme de MusicLand (+
+                    réseaux sociaux) et participer au concours
+                  </Text>
+                  <Text style={styles.description}>
+                    Top 3: 1er 15% du CA ML - 2ème 10% du CA ML - 3ème 5% du CA
+                    ML (catégorie chanson)
+                  </Text>
+                </BlurView>
+              </Pressable>
+            </View>
+          </View>
+        </CreateLyricsHeader>
+      </View>
+    </Page>
   );
 };
 
 export default DownloadSongs;
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 22,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  label: {
+    fontSize: 16,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.HelveticaNeueBold,
+  },
+  description: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterRegular,
+  },
+  blurView: {
+    paddingHorizontal: 10,
+    paddingBottom: 8,
+    paddingTop: 10,
+  },
+  itemContainer: {
+    borderRadius: 12,
+    overflow: "hidden",
+    backgroundColor: "#FFFFFF03",
+    shadowColor: "#0000001A",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+});