update

2025-08-05 21:04:28 +08:00
parent e22b87bd49
commit d08ec7b778
24 changed files with 994 additions and 78 deletions
@@ -0,0 +1,125 @@
+import { View, Text, Pressable, Image } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Palette, Style } from "../../styles";
+import { BlurView } from "expo-blur";
+import { ai, icons } from "../../assets";
+import { size } from "../../styles/Style";
+import ProgressBar from "../../components/ProgressBar";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import GradientButton from "../../components/GradientButton";
+import { navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
+
+const CreatingLyrics = ({ active }) => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (active) {
+      const interval = setInterval(() => {
+        setProgress((prevProgress) => {
+          if (prevProgress >= 100) {
+            clearInterval(interval);
+            return 100;
+          }
+          return prevProgress + 1;
+        });
+      }, 100);
+
+      return () => clearInterval(interval);
+    }
+  }, [active]);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        ...Style.containerCenter,
+      }}
+    >
+      <View
+        style={{
+          width: "100%",
+          height: "50%",
+        }}
+      >
+        <View
+          style={{
+            zIndex: 1,
+            position: "absolute",
+            top: -150,
+            width: "50%",
+            height: "80%",
+            alignSelf: "center",
+          }}
+        >
+          <Image
+            source={ai.nathalie}
+            style={{ width: "100%", height: "100%", right: -10 }}
+            resizeMode="contain"
+          />
+        </View>
+        <View
+          style={{
+            flex: 1,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: "#0F0C1933",
+          }}
+        >
+          <BlurView
+            intensity={40}
+            style={{ flex: 1, padding: 10, paddingBottom: 20 }}
+          >
+            <Pressable
+              style={{
+                ...size({ size: 24 }),
+                ...Style.containerCenter,
+                position: "absolute",
+                top: 10,
+                left: 10,
+                zIndex: 3,
+              }}
+              onPress={() => console.log("Pressed")}
+            >
+              <Image source={icons.close} style={size({ size: 11 })} />
+            </Pressable>
+            <View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
+              <Text
+                style={{
+                  fontSize: 22,
+                  color: Palette.white,
+                  fontFamily: FONT_FAMILY.InterSemiBold,
+                  textAlign: "center",
+                }}
+              >
+                Ton texte est{"\n"}en cours de création
+              </Text>
+              <View style={{ alignItems: "center", gap: 16 }}>
+                <ProgressBar gradient progress={progress} />
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  {progress}%
+                </Text>
+              </View>
+              <GradientButton
+                title="Découvrir mon texte"
+                containerStyle={{
+                  width: "80%",
+                  alignSelf: "center",
+                }}
+                onPress={() => navigate(Routes.Lyrics)}
+              />
+            </View>
+          </BlurView>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default CreatingLyrics;