This commit is contained in:
Philip Cesar Garay
2025-08-07 21:02:22 +08:00
parent 40e877774b
commit 5a4d36e1bc
34 changed files with 902 additions and 137 deletions
@@ -57,7 +57,6 @@ const CreateLyricsWithAi = () => {
<View
style={{
flex: 1,
marginTop: 16,
paddingBottom: gutters,
gap: responsiveHeight(5),
}}
+2 -3
View File
@@ -7,7 +7,7 @@ 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 { goBack, navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const CreatingLyrics = ({ active }) => {
@@ -19,7 +19,6 @@ const CreatingLyrics = ({ active }) => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
navigate(Routes.Lyrics)
return 100;
}
return prevProgress + 1;
@@ -80,7 +79,7 @@ const CreatingLyrics = ({ active }) => {
left: 10,
zIndex: 3,
}}
onPress={() => console.log("Pressed")}
onPress={goBack}
>
<Image source={icons.close} style={size({ size: 11 })} />
</Pressable>
@@ -10,7 +10,7 @@ const CustomizeSongStructure = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title="Personnalise la structure de ta chanson"
subTitle="Intègre en Drag and drop"
+17 -43
View File
@@ -1,19 +1,15 @@
import { View, Text, FlatList } from "react-native";
import React, { useState } from "react";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
import ItemContainer from "../../components/ItemContainer/ItemContainer";
const EmotionConvey = () => {
const [itemLayout, setItemLayout] = useState([]);
return (
<View style={{ flex: 1, gap: 10 }}>
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title={`Quel émotion veux-tu\ntransmettre ?`}
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
@@ -26,46 +22,24 @@ const EmotionConvey = () => {
gap: 16,
flexGrow: 1,
zIndex: 2,
paddingTop: 5,
}}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: item.color,
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
<View style={{ paddingHorizontal: 5 }}>
<CreateLyricsHeader colors={item.color} intensity={30} >
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</CreateLyricsHeader>
</View>
)}
/>
+1 -1
View File
@@ -10,7 +10,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Goals = () => {
return (
<View style={{ flex: 1, gap: 16 }}>
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader title="Quels sont tes objectifs ?" />
<ItemContainer>
+1 -1
View File
@@ -8,7 +8,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
const Rhymes = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader title="Avec ou sans rimes" />
<ItemContainer height={200}>
<View style={{ gap: 10 }}>
+1 -1
View File
@@ -9,7 +9,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStructure = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title="Comment veux-tu structurer ta chanson ?"
subTitle="Sélectionne une structure."
+1 -1
View File
@@ -10,7 +10,7 @@ import ItemContainer from "../../components/ItemContainer/ItemContainer";
const SongStyle = () => {
return (
<View style={{ flex: 1, gap: 16 }}>
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader
title={`Quel est le style de ta chanson ?`}
+1 -1
View File
@@ -5,7 +5,7 @@ import CustomInput from "./components/CustomInput";
const SongTo = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader title="À qui sadresse ta chanson ?" />
<CustomInput placeholder="Ecrire mon contexte" height={283} />
</View>
+1 -1
View File
@@ -5,7 +5,7 @@ import CustomInput from "./components/CustomInput";
const SpecificityContext = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
<CreateLyricsHeader
title="Spécificité du contexte"
subTitle="Dis-nous en un peu plus pour quon puisse mieux taider."
@@ -6,18 +6,27 @@ import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import useLayoutType from "../../../hooks/useLayoutType";
const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
const CreateLyricsHeader = ({
title = "",
subTitle = "",
children,
colors = ["#FFFFFF00", "#FFFFFF"],
gradientProps,
intensity = 40,
tint = "dark",
}) => {
const [onLayout, setOnLayout] = useState(null);
const { isWeb } = useLayoutType();
return (
<View style={{ paddingTop: isWeb ? 10 : 0 }}>
<View>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
colors: colors,
locations: [0.2, 1],
start: { x: 0, y: 0 },
end: { x: 1, y: 0 },
...{ gradientProps },
}}
style={{
height: isWeb ? onLayout?.height + 2 : onLayout?.height,
@@ -41,22 +50,25 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
onPress={() => console.log("PRESSED")}
>
<BlurView
intensity={20}
intensity={intensity}
tint={tint}
style={{
paddingHorizontal: 12,
paddingVertical: 8,
gap: 4,
}}
>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{title}
</Text>
{title && (
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
}}
>
{title}
</Text>
)}
{subTitle && (
<Text
style={{
@@ -68,6 +80,7 @@ const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
{subTitle}
</Text>
)}
{children}
</BlurView>
</Pressable>
</View>