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>
+	);
+}

frontend/app/(app)/_layout.js

@@ -1,7 +1,7 @@
-import { Redirect, Stack } from "expo-router";
-
-import { useAuth } from "../context/AuthContext";
-import { View, Text } from "react-native";
+import { Redirect, Stack, Slot } from "expo-router";
+import { useAuth } from "@context/AuthContext";
+import { View, Text, StyleSheet } from "react-native";
+import { StatusBar } from "expo-status-bar";
 
 export default function AppLayout() {
 	const { authState } = useAuth();
@@ -18,5 +18,9 @@ export default function AppLayout() {
 		console.log("get the fuck out");
 		return <Redirect href="/login" />;
 	}
-	return <Stack />;
+	return (
+		<Stack>
+			<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+		</Stack>
+	);
 }

frontend/app/(app)/index.js

@@ -1,23 +0,0 @@
-import { Text, View } from "react-native";
-
-import { useAuth } from "../context/AuthContext";
-
-export default function Index() {
-	const { onLogout, authState } = useAuth();
-
-	const user = authState.user;
-
-	return (
-		<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-			<Text>Welcome {user.username}</Text>
-			<Text
-				onPress={() => {
-					// The `app/(app)/_layout.tsx` will redirect to the sign-in screen.
-					onLogout();
-				}}
-			>
-				Sign Out
-			</Text>
-		</View>
-	);
-}

frontend/babel.config.js

@@ -2,5 +2,18 @@ module.exports = function (api) {
 	api.cache(true);
 	return {
 		presets: ["babel-preset-expo"],
+		plugins: [
+			[
+				"module-resolver",
+				{
+					root: ["."],
+					alias: {
+						"@components": "./components",
+						"@context": "./app/context",
+						"@assets": "./assets",
+					},
+				},
+			],
+		],
 	};
 };

frontend/components/Button.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Text, StyleSheet, Pressable } from "react-native";
 
 export default function Button(props) {
-	const { onPress, title = "Save", color = "black" } = props;
+	const { onPress, title = "Button", color = "black" } = props;
 	return (
 		<Pressable
 			style={({ pressed }) => [

frontend/components/Link.js

@@ -0,0 +1,15 @@
+import { Link as EXLink } from "expo-router";
+
+const Link = (props) => {
+	const defaultStyles = {
+		color: "white",
+	};
+
+	return (
+		<EXLink style={[defaultStyles, props.style]} href={props.href}>
+			{props.children}
+		</EXLink>
+	);
+};
+
+export default Link;

frontend/components/Text.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Text as RNText } from "react-native";
+
+const Text = (props) => {
+	// Apply your default text color and any other styles here
+	const defaultStyles = {
+		color: "white", // Set the default text color to white
+	};
+
+	return <RNText style={[defaultStyles, props.style]}>{props.children}</RNText>;
+};
+
+export default Text;

frontend/components/style.js

@@ -5,5 +5,6 @@ export const colors = {
 	green: "#228B22ff",
 	charcoal: "#2C3E50ff",
 	black: "#020405ff",
-	dark: "#010611",
+	dark: "#010409",
+	darkSecondary: "#0D1117",
 };

frontend/package.json

@@ -28,7 +28,8 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.20.0",
-		"@biomejs/biome": "1.7.3"
+		"@biomejs/biome": "1.7.3",
+		"babel-plugin-module-resolver": "^5.0.2"
 	},
 	"private": true
 }