Philip Cesar Garay
114 lines
3.2 KiB
JavaScript
114 lines
3.2 KiB
JavaScript
import { View, Text, FlatList, StyleSheet, SectionList } from "react-native";
|
|
import React, { useState } from "react";
|
|
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
|
|
import ItemContainer from "../../components/ItemContainer/ItemContainer";
|
|
import { Palette, Style } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import { BlurView } from "expo-blur";
|
|
import { VOICE } from "../../data/data";
|
|
|
|
const CustomizeVoice = () => {
|
|
const [containerLayout, setContainerLayout] = useState(null);
|
|
const [selected, setSelected] = useState(null);
|
|
|
|
const onPressSelect = (item) => {
|
|
if (selected === item) {
|
|
setSelected(null);
|
|
} else {
|
|
setSelected(item);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View style={{ flex: 1, gap: 10, paddingTop: 16 }}>
|
|
<CreateLyricsHeader
|
|
title="Personnalise la voix que tu veux pour ta chanson"
|
|
subTitle="Choisis maximum 1 option par catégorie."
|
|
/>
|
|
<View
|
|
style={{ flex: 1 }}
|
|
onLayout={(event) => setContainerLayout(event.nativeEvent.layout)}
|
|
>
|
|
<ItemContainer height={containerLayout?.height}>
|
|
<View style={{ flex: 1, gap: 10 }}>
|
|
<SectionList
|
|
sections={VOICE}
|
|
showsVerticalScrollIndicator={false}
|
|
contentContainerStyle={styles.contentContainer}
|
|
renderItem={({ item }) => {
|
|
const selectedItem = selected === item;
|
|
|
|
return (
|
|
<CreateLyricsHeader
|
|
onPress={() => onPressSelect(item)}
|
|
tint={selectedItem ? "default" : "dark"}
|
|
colors={
|
|
selectedItem
|
|
? ["#FFFFFF00", "#FFFFFF"]
|
|
: [Palette.tran, Palette.tran]
|
|
}
|
|
containerStyle={{
|
|
...styles.itemContainer,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
paddingVertical: 6,
|
|
}}
|
|
>
|
|
<Text style={styles.itemText}>{item}</Text>
|
|
</View>
|
|
</CreateLyricsHeader>
|
|
);
|
|
}}
|
|
renderSectionHeader={({ section: { title } }) => (
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterBold,
|
|
left: 10,
|
|
}}
|
|
>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
/>
|
|
</View>
|
|
</ItemContainer>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CustomizeVoice;
|
|
|
|
const styles = StyleSheet.create({
|
|
contentContainer: {
|
|
flexGrow: 1,
|
|
padding: 8,
|
|
gap: 10,
|
|
backgroundColor: "#FFFFFF00",
|
|
paddingBottom: 50,
|
|
},
|
|
itemContainer: {
|
|
backgroundColor: Palette.glass,
|
|
borderRadius: 14,
|
|
overflow: "hidden",
|
|
shadowColor: "#00000040",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
|
|
elevation: 5,
|
|
},
|
|
itemText: {
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
});
|