Added: beer add page

frontend/app/(app)/(tabs)/_layout.js

@@ -20,7 +20,7 @@ export default function TabLayout() {
 						backgroundColor: colors.darkSecondary,
 					},
 					tabBarActiveTintColor: colors.gold,
-					headerShown: false,
+					headerShown: true,
 				}}
 				sceneContainerStyle={{ backgroundColor: colors.dark }}
 			>
@@ -62,7 +62,10 @@ export default function TabLayout() {
 				/>
 
 				{/* Hide following routes from bottom bar */}
-				<Tabs.Screen name="beer/add" options={{ href: null }} />
+				<Tabs.Screen
+					name="beer/add"
+					options={{ href: null, title: "Add beer" }}
+				/>
 			</Tabs>
 		</View>
 	);

frontend/app/(app)/(tabs)/beer/add.js

@@ -1,10 +1,85 @@
-import { View } from "react-native";
+import { StyleSheet, TextInput, View } from "react-native";
+import { useState } from "react";
 import Text from "@components/Text";
+import Button from "@components/Button";
+import { colors } from "@components/style";
 
 export default function BeerAdd() {
+	const [b_name, setBName] = useState("");
+	const [b_degree, setBDegree] = useState("");
+	const [b_packaging, setBPackaging] = useState("");
+	const [b_brand, setBBrand] = useState("");
+
+	async function addBeer() {
+		const req = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/beer/add`, {
+			method: "POST",
+			credentials: "include",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				brand: b_brand,
+				name: b_name,
+				degree: b_degree,
+				packaging: b_packaging,
+				photos: null,
+			}),
+		});
+		console.log(1, req);
+		const res = await req.json();
+		console.log(2, res);
+	}
+
 	return (
-		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+		<View style={styles.container}>
-			<Text>Beer Add</Text>
+			<View style={styles.form}>
+				<TextInput
+					style={styles.input}
+					placeholder="Name"
+					value={b_name}
+					onChangeText={(text) => setBName(text)}
+				/>
+				<TextInput
+					style={styles.input}
+					placeholder="Brand"
+					value={b_brand}
+					onChangeText={(text) => setBBrand(text)}
+				/>
+				<TextInput
+					style={styles.input}
+					placeholder="Degree"
+					value={b_degree}
+					onChangeText={(text) => setBDegree(text)}
+				/>
+				<TextInput
+					style={styles.input}
+					placeholder="Packaging"
+					value={b_packaging}
+					onChangeText={(text) => setBPackaging(text)}
+				/>
+				<Button title="Add beer" color={colors.green} onPress={addBeer} />
+			</View>
 		</View>
 	);
 }
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	form: {
+		flex: 1,
+		alignItems: "center",
+		paddingTop: "10%",
+		gap: 15,
+	},
+	input: {},
+	input: {
+		height: "auto",
+		width: "60%",
+		borderColor: "gray",
+		borderWidth: 1,
+		borderRadius: 5,
+		padding: 10,
+		color: "#fff",
+		placeholderTextColor: "#aaaaaa",
+	},
+});

frontend/app/(app)/(tabs)/beer/index.js

@@ -16,6 +16,10 @@ export default function Tab() {
 					router.replace("/beer/add");
 				}}
 			/>
+
+			<View style={styles.beerContainer}>
+				<Text>kokot</Text>
+			</View>
 		</View>
 	);
 }