update

2025-08-07 21:02:22 +08:00
parent 40e877774b
commit 5a4d36e1bc
34 changed files with 902 additions and 137 deletions
@@ -0,0 +1,123 @@
+import { View, Text, Image } from "react-native";
+import React, { useState } from "react";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { background, icons, img } from "../../assets";
+import Page from "../../layouts/Page";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import { gutters, Palette, Style } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import BorderGradientButton from "../../components/BorderGradientButton";
+import GradientButton from "../../components/GradientButton";
+import { launchImageLibraryAsync } from "expo-image-picker";
+import { Routes } from "../../navigation";
+
+const AddPhotoCover = () => {
+  const [image, setImage] = useState(null);
+
+  const onPressAddImage = async () => {
+    const result = await launchImageLibraryAsync({
+      mediaTypes: ["images"],
+      allowsEditing: true,
+      aspect: [4, 3],
+      quality: 1,
+    });
+
+    if (!result.canceled) {
+      setImage(result.assets[0]?.uri);
+    }
+  };
+
+  return (
+    <Page backgroundImg={background.studioBG2} headerType="NONE">
+      <MusicLandHeader onPressBack={goBack} progress={90} />
+      <View style={{ flex: 1, marginTop: 16 }}>
+        <CreateLyricsHeader
+          title="Ta pochette est prête!"
+          subTitle="Qu’en penses-tu ?"
+        />
+        <View style={{ flex: 1, ...Style.containerCenter }}>
+          <View style={{ width: "80%", position: "relative" }}>
+            <Image
+              source={img.placeholder}
+              style={{
+                width: "100%",
+                height: 300,
+                borderRadius: 20,
+                transform: [{ rotateY: "180deg" }],
+              }}
+            />
+            <View
+              style={{ position: "absolute", width: "100%", height: "100%" }}
+            >
+              <Image
+                source={{ uri: image }}
+                style={{ width: "100%", height: "100%", borderRadius: 20 }}
+              />
+            </View>
+            <View
+              style={{
+                position: "absolute",
+                alignSelf: "center",
+                alignItems: "center",
+                top: 10,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                }}
+              >
+                Lust for Life
+              </Text>
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: Palette.gray,
+                  fontFamily: FONT_FAMILY.InterRegular,
+                }}
+              >
+                Lana del Rey
+              </Text>
+            </View>
+            <View
+              style={{
+                position: "absolute",
+                alignItems: "center",
+                bottom: 10,
+                width: "100%",
+              }}
+            >
+              <Image
+                source={icons.musicLandLogo}
+                style={{ width: "100%", height: 30 }}
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+      <View
+        style={{
+          paddingBottom: gutters * 2,
+          width: "80%",
+          alignSelf: "center",
+          gap: 12,
+        }}
+      >
+        <BorderGradientButton
+          title="Ajouter une autre photo"
+          onPress={onPressAddImage}
+        />
+        <GradientButton
+          title="Valider"
+          onPress={() => navigate(Routes.FinishCompose)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default AddPhotoCover;