Philip Cesar Garay
76 lines
2.7 KiB
JavaScript
76 lines
2.7 KiB
JavaScript
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;
|