Philip Cesar Garay
129 lines
3.5 KiB
JavaScript
129 lines
3.5 KiB
JavaScript
import { View, Text, Image, Pressable } from "react-native";
|
|
import React, { useEffect, useState } from "react";
|
|
import { ai, icons } from "../../assets";
|
|
import { BlurView } from "expo-blur";
|
|
import Style, { size } from "../../styles/Style";
|
|
import { Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import ProgressBar from "../../components/ProgressBar";
|
|
import { goBack, navigate } from "../../navigation/NavigationService";
|
|
import { Routes } from "../../navigation";
|
|
import GradientButton from "../../components/GradientButton";
|
|
|
|
const CreatingSong = ({ 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,
|
|
paddingTop: 16,
|
|
...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.theo}
|
|
style={{ width: "100%", height: "100%", right: -10 }}
|
|
resizeMode="contain"
|
|
/>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
borderRadius: 20,
|
|
overflow: "hidden",
|
|
backgroundColor: "#0F0C1933",
|
|
}}
|
|
>
|
|
<BlurView
|
|
intensity={40}
|
|
tint="dark"
|
|
style={{ flex: 1, padding: 10, paddingBottom: 20 }}
|
|
>
|
|
<Pressable
|
|
style={{
|
|
...size({ size: 24 }),
|
|
...Style.containerCenter,
|
|
position: "absolute",
|
|
top: 10,
|
|
left: 10,
|
|
zIndex: 3,
|
|
}}
|
|
onPress={goBack}
|
|
>
|
|
<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.SongReady)}
|
|
/>
|
|
</View>
|
|
</BlurView>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CreatingSong;
|