diff --git a/LeftOvers/screens/IngredientSelection.tsx b/LeftOvers/screens/IngredientSelection.tsx
index 3b90812..9933677 100644
--- a/LeftOvers/screens/IngredientSelection.tsx
+++ b/LeftOvers/screens/IngredientSelection.tsx
@@ -14,114 +14,117 @@ import fruit from '../assets/images/fruit_icon.png';
export default function IngredientSelection(props) {
+ const [searchQuery, setSearchQuery] = React.useState('');
- const [searchQuery, setSearchQuery] = React.useState('');
+ const onChangeSearch = query => setSearchQuery(query);
- const onChangeSearch = query => setSearchQuery(query);
+ type ItemProps = {value: string}
- type ItemProps = {value: string}
-
- const AvailaibleItem = ({value}: ItemProps) => (
- <>
-
-
-
-
- >
-)
-
-const ChooseItem = ({value}: ItemProps) => (
- <>
-
-
-
-
- >
-)
-
- return (
-
-
-
-
-
+ const AvailaibleItem = ({value}: ItemProps) => (
+ <>
+
+
-
-
-
-
+
+
+ >
+ )
+
+ const ChooseItem = ({value}: ItemProps) => (
+ <>
+
+
-
+
-
-
-
-
-
-
- {props.listIngredient.map((source, index) => (
-
- ))}
-
-
-
-
+
+ >
+ )
+
+
+ const styles = StyleSheet.create({
+ page: {
+ flex: 1,
+ backgroundColor: '#59BDCD',
+ alignItems: 'center',
+ display: 'flex',
+ flexWrap: 'wrap',
+ padding: 20,
+ },
+ element: {
+ backgroundColor:'#F2F0E4',
+ borderRadius: 30,
+ },
+ horizontalAlignement: {
+ display: 'flex',
+ height: 30,
+ width: 350,
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ marginTop: 15,
+ }
+ });
-
-
- Available
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {props.listIngredient.map((source, index) => (
+
+ ))}
+
+
+
-
-
-
-
- {props.listIngredient.map((source, index) => (
-
- ))}
-
-
-
-
+
+
+ Available
+
+
+
-
-
-
+
+
+ {props.listIngredient.map((source, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
- );
+ );
}
-
-const styles = StyleSheet.create({
- page: {
- flex: 1,
- backgroundColor: '#59BDCD',
- alignItems: 'center',
- display: 'flex',
- flexWrap: 'wrap',
- padding: 20,
- },
- element: {
- backgroundColor:'#F2F0E4',
- borderRadius: 30,
- },
- horizontalAlignement: {
- display: 'flex',
- height: 30,
- width: 350,
- flexDirection: 'row',
- justifyContent: 'space-around',
- alignItems: 'center',
- marginTop: 15,
- }
-});