Added: Link and Text component, Named links for components..., Tab layout

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

@@ -0,0 +1,69 @@
+import React from "react";
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import { Tabs } from "expo-router";
+import { StyleSheet, View } from "react-native";
+import { colors } from "@components/style";
+import { StatusBar } from "expo-status-bar";
+
+export default function TabLayout() {
+	return (
+		<View style={{ flex: 1 }}>
+			<StatusBar style="light" />
+			<Tabs
+				screenOptions={{
+					headerStyle: {
+						backgroundColor: colors.dark,
+					},
+					headerTintColor: "white",
+					tabBarStyle: {
+						backgroundColor: colors.darkSecondary,
+					},
+					tabBarActiveTintColor: colors.gold,
+					headerShown: false,
+				}}
+				sceneContainerStyle={{ backgroundColor: colors.dark }}
+			>
+				<Tabs.Screen
+					name="index"
+					options={{
+						title: "Home",
+						tabBarIcon: ({ color }) => (
+							<FontAwesome size={28} name="home" color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="beer/index"
+					options={{
+						title: "Beers",
+						tabBarIcon: ({ color }) => (
+							<FontAwesome size={28} name="beer" color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="review"
+					options={{
+						title: "Reviews",
+						tabBarIcon: ({ color }) => (
+							<MaterialIcons size={28} name="reviews" color={color} />
+						),
+					}}
+				/>
+				<Tabs.Screen
+					name="settings"
+					options={{
+						title: "Settings",
+						tabBarIcon: ({ color }) => (
+							<FontAwesome size={28} name="cog" color={color} />
+						),
+					}}
+				/>
+
+				{/* Hide following routes from bottom bar */}
+				<Tabs.Screen name="beer/add" options={{ href: null }} />
+			</Tabs>
+		</View>
+	);
+}

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

@@ -0,0 +1,10 @@
+import { View } from "react-native";
+import Text from "@components/Text";
+
+export default function BeerAdd() {
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Beer Add</Text>
+		</View>
+	);
+}

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

@@ -0,0 +1,21 @@
+import { View } from "react-native";
+import Text from "@components/Text";
+import Button from "@components/Button";
+import { colors } from "@components/style";
+import { router } from "expo-router";
+
+export default function Tab() {
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Tab BEER</Text>
+
+			<Button
+				title="Add Beers"
+				color={colors.gold}
+				onPress={() => {
+					router.replace("/beer/add");
+				}}
+			/>
+		</View>
+	);
+}

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

@@ -0,0 +1,30 @@
+import { StyleSheet, Text, View } from "react-native";
+import Button from "@components/Button";
+import { colors } from "@components/style";
+import { useAuth } from "@context/AuthContext";
+import Link from "@components/Link";
+
+export default function Index() {
+	const { onLogout, authState } = useAuth();
+	const user = authState.user;
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.h1}>Welcome {user.username}</Text>
+			<Link href="/beer">Go to BEER</Link>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: "center",
+	},
+	h1: {
+		color: "#FFF",
+		fontSize: 30,
+		textAlign: "center",
+		paddingTop: "20%",
+	},
+});

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

@@ -0,0 +1,10 @@
+import { View } from "react-native";
+import Text from "@components/Text";
+
+export default function Tab() {
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Tab REVIEW</Text>
+		</View>
+	);
+}

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

@@ -0,0 +1,17 @@
+import { View } from "react-native";
+import Button from "@components/Button";
+import { colors } from "@components/style";
+import { useAuth } from "@context/AuthContext";
+import Text from "@components/Text";
+
+export default function Tab() {
+	const { onLogout, authState } = useAuth();
+	const user = authState.user;
+
+	return (
+		<View style={{ justifyContent: "center", alignItems: "center", flex: 1 }}>
+			<Text>Welcome {user.username}</Text>
+			<Button title="Log out" color={colors.brown} onPress={onLogout} />
+		</View>
+	);
+}