Philip Cesar Garay
82 lines
2.2 KiB
JavaScript
82 lines
2.2 KiB
JavaScript
import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
|
||
import React from "react";
|
||
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
||
import { BlurView } from "expo-blur";
|
||
import { GOALS } from "../../data/data";
|
||
import { Palette, Style } from "../../styles";
|
||
import CustomInput from "./components/CustomInput";
|
||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||
import ItemContainer from "../../components/ItemContainer/ItemContainer";
|
||
|
||
const SongStyle = () => {
|
||
return (
|
||
<View style={{ flex: 1, gap: 16 }}>
|
||
<View style={{ gap: 10 }}>
|
||
<CreateLyricsHeader
|
||
title={`Quel est le style de ta chanson ?`}
|
||
subTitle="Choisis l'ambiance émotions que tu veux faire passer."
|
||
/>
|
||
<ItemContainer>
|
||
<FlatList
|
||
data={GOALS}
|
||
showsVerticalScrollIndicator={false}
|
||
contentContainerStyle={styles.contentContainer}
|
||
renderItem={({ item }) => (
|
||
<Pressable style={styles.itemContainer}>
|
||
<BlurView
|
||
intensity={30}
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: Palette.glass,
|
||
paddingHorizontal: 14,
|
||
...Style.containerCenter,
|
||
}}
|
||
>
|
||
<Text style={styles.itemText}>{item}</Text>
|
||
</BlurView>
|
||
</Pressable>
|
||
)}
|
||
/>
|
||
</ItemContainer>
|
||
</View>
|
||
<CustomInput
|
||
label="Tu as un autre style de chanson ?"
|
||
placeholder="Décrire l’objectif"
|
||
/>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default SongStyle;
|
||
|
||
const styles = StyleSheet.create({
|
||
contentContainer: {
|
||
flexGrow: 1,
|
||
padding: 8,
|
||
gap: 10,
|
||
backgroundColor: "#FFFFFF00",
|
||
paddingBottom: 50,
|
||
},
|
||
itemContainer: {
|
||
height: 54,
|
||
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,
|
||
textAlign: "center",
|
||
},
|
||
});
|