update

2025-08-12 21:03:49 +08:00
parent 5a521d2f3d
commit 7d8942e125
49 changed files with 1002 additions and 122 deletions
@@ -0,0 +1,75 @@
+import { View, Text } from "react-native";
+import React, { useState } from "react";
+import Page from "../../layouts/Page";
+import { background } from "../../assets";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import GradientButton from "../../components/GradientButton";
+import { CHOOSE_DECOR } from "../../data/data";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import { Routes } from "../../navigation";
+
+const ChooseDecor = () => {
+  const [selected, setSelected] = useState("");
+
+  return (
+    <Page headerType="NONE" backgroundImg={background.playbackBG2}>
+      <MusicLandHeader progress={20} onPressBack={goBack} />
+      <View style={{ flex: 1, marginTop: 12, gap: 34 }}>
+        <View style={{ gap: 10 }}>
+          <CreateLyricsHeader
+            title="Choisis ton décor"
+            subTitle="Il sera généré derrière toi lors de ton Playback."
+          />
+          <ItemContainer height={402}>
+            <View style={{ gap: 10, marginTop: 5, paddingHorizontal: 5 }}>
+              {CHOOSE_DECOR.map((item, index) => {
+                const selectedItem = selected === item;
+
+                return (
+                  <CreateLyricsHeader
+                    key={index}
+                    gradientProps={{
+                      locations: [0, 1],
+                    }}
+                    containerStyle={{
+                      borderRadius: 14,
+                    }}
+                    onPress={() => setSelected(item)}
+                    colors={
+                      selectedItem
+                        ? ["#99999900", "#FFFFFF"]
+                        : [Palette.tran, Palette.tran]
+                    }
+                    tint={selectedItem ? "default" : "dark"}
+                  >
+                    <View style={{ paddingVertical: 6 }}>
+                      <Text
+                        style={{
+                          fontSize: 16,
+                          color: Palette.white,
+                          fontFamily: FONT_FAMILY.InterRegular,
+                        }}
+                      >
+                        {item}
+                      </Text>
+                    </View>
+                  </CreateLyricsHeader>
+                );
+              })}
+            </View>
+          </ItemContainer>
+        </View>
+        <GradientButton
+          title="Suivant"
+          onPress={() => navigate(Routes.CreatingDecor)}
+        />
+      </View>
+    </Page>
+  );
+};
+
+export default ChooseDecor;