Philip Cesar Garay
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
import { View, Text, FlatList } from "react-native";
|
|
import React from "react";
|
|
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
import { Palette } from "../../styles";
|
|
import { FONT_FAMILY } from "../../styles/Fonts";
|
|
import { EMOTION_CONVEY } from "../../data/data";
|
|
import ItemContainer from "../../components/ItemContainer/ItemContainer";
|
|
|
|
const EmotionConvey = () => {
|
|
return (
|
|
<View style={{ flex: 1, gap: 10, marginTop: 16 }}>
|
|
<CreateLyricsHeader
|
|
title={`Quel émotion veux-tu\ntransmettre ?`}
|
|
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
|
|
/>
|
|
|
|
<ItemContainer height={responsiveHeight(50)}>
|
|
<FlatList
|
|
data={EMOTION_CONVEY}
|
|
contentContainerStyle={{
|
|
gap: 16,
|
|
flexGrow: 1,
|
|
zIndex: 2,
|
|
paddingTop: 5,
|
|
}}
|
|
renderItem={({ item, index }) => (
|
|
<View style={{ paddingHorizontal: 5 }}>
|
|
<CreateLyricsHeader colors={item.color} intensity={30} >
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
}}
|
|
>
|
|
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
|
|
{item.title}
|
|
</Text>{" "}
|
|
: {item.description}
|
|
</Text>
|
|
</CreateLyricsHeader>
|
|
</View>
|
|
)}
|
|
/>
|
|
</ItemContainer>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default EmotionConvey;
|