Added: Link and Text component, Named links for components..., Tab layout
This commit is contained in:
parent
e62ef8695b
commit
b17cf25970
69
frontend/app/(app)/(tabs)/_layout.js
Normal file
69
frontend/app/(app)/(tabs)/_layout.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
10
frontend/app/(app)/(tabs)/beer/add.js
Normal file
10
frontend/app/(app)/(tabs)/beer/add.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
21
frontend/app/(app)/(tabs)/beer/index.js
Normal file
21
frontend/app/(app)/(tabs)/beer/index.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
30
frontend/app/(app)/(tabs)/index.js
Normal file
30
frontend/app/(app)/(tabs)/index.js
Normal file
@ -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%",
|
||||
},
|
||||
});
|
10
frontend/app/(app)/(tabs)/review.js
Normal file
10
frontend/app/(app)/(tabs)/review.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
17
frontend/app/(app)/(tabs)/settings.js
Normal file
17
frontend/app/(app)/(tabs)/settings.js
Normal file
@ -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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
@ -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",
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
};
|
||||
};
|
||||
|
@ -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 }) => [
|
||||
|
15
frontend/components/Link.js
Normal file
15
frontend/components/Link.js
Normal file
@ -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;
|
13
frontend/components/Text.js
Normal file
13
frontend/components/Text.js
Normal file
@ -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;
|
@ -5,5 +5,6 @@ export const colors = {
|
||||
green: "#228B22ff",
|
||||
charcoal: "#2C3E50ff",
|
||||
black: "#020405ff",
|
||||
dark: "#010611",
|
||||
dark: "#010409",
|
||||
darkSecondary: "#0D1117",
|
||||
};
|
||||
|
30570
frontend/package-lock.json
generated
30570
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user