81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import React, { useState } from "react";
|
||
import { StyleSheet, View } from "react-native";
|
||
import ItemContainer from "../../components/ItemContainer/ItemContainer";
|
||
import ListSelection from "../../components/ListSelection/ListSelection";
|
||
import { GOALS } from "../../data/data";
|
||
import { Palette } from "../../styles";
|
||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||
import CreateLyricsHeader from "./components/CreateLyricsHeader";
|
||
import CustomInput from "./components/CustomInput";
|
||
|
||
const Goals = ({
|
||
selected: selectedProp,
|
||
setSelected: setSelectedProp,
|
||
otherObjective,
|
||
setOtherObjective,
|
||
}) => {
|
||
const [internalSelected, setInternalSelected] = useState(null);
|
||
|
||
const selected = selectedProp ?? internalSelected;
|
||
const setSelected = setSelectedProp ?? setInternalSelected;
|
||
|
||
// Selection handled by ListSelection
|
||
|
||
return (
|
||
<View style={{ flex: 1, gap: 16, marginTop: 16 }}>
|
||
<View style={{ gap: 10 }}>
|
||
<CreateLyricsHeader title="Quel est ton objectif ?" />
|
||
<ItemContainer>
|
||
<ListSelection
|
||
options={GOALS}
|
||
variant="simple"
|
||
selected={selected}
|
||
setSelected={setSelected}
|
||
contentContainerStyle={styles.contentContainer}
|
||
itemContainerStyle={styles.itemContainer}
|
||
itemTextStyle={styles.itemText}
|
||
/>
|
||
</ItemContainer>
|
||
</View>
|
||
<CustomInput
|
||
label="Tu as un autre objectif?"
|
||
placeholder="Décrire l’objectif"
|
||
value={otherObjective}
|
||
setValue={setOtherObjective}
|
||
/>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
export default Goals;
|
||
|
||
const styles = StyleSheet.create({
|
||
contentContainer: {
|
||
flexGrow: 1,
|
||
padding: 8,
|
||
gap: 10,
|
||
backgroundColor: "#FFFFFF00",
|
||
paddingBottom: 50,
|
||
width: "100%",
|
||
},
|
||
itemContainer: {
|
||
height: 54,
|
||
borderRadius: 14,
|
||
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",
|
||
},
|
||
});
|