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 { Redirect, Stack, Slot } from "expo-router";
|
||||||
|
import { useAuth } from "@context/AuthContext";
|
||||||
import { useAuth } from "../context/AuthContext";
|
import { View, Text, StyleSheet } from "react-native";
|
||||||
import { View, Text } from "react-native";
|
import { StatusBar } from "expo-status-bar";
|
||||||
|
|
||||||
export default function AppLayout() {
|
export default function AppLayout() {
|
||||||
const { authState } = useAuth();
|
const { authState } = useAuth();
|
||||||
@ -18,5 +18,9 @@ export default function AppLayout() {
|
|||||||
console.log("get the fuck out");
|
console.log("get the fuck out");
|
||||||
return <Redirect href="/login" />;
|
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);
|
api.cache(true);
|
||||||
return {
|
return {
|
||||||
presets: ["babel-preset-expo"],
|
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";
|
import { Text, StyleSheet, Pressable } from "react-native";
|
||||||
|
|
||||||
export default function Button(props) {
|
export default function Button(props) {
|
||||||
const { onPress, title = "Save", color = "black" } = props;
|
const { onPress, title = "Button", color = "black" } = props;
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
style={({ pressed }) => [
|
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",
|
green: "#228B22ff",
|
||||||
charcoal: "#2C3E50ff",
|
charcoal: "#2C3E50ff",
|
||||||
black: "#020405ff",
|
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": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.20.0",
|
"@babel/core": "^7.20.0",
|
||||||
"@biomejs/biome": "1.7.3"
|
"@biomejs/biome": "1.7.3",
|
||||||
|
"babel-plugin-module-resolver": "^5.0.2"
|
||||||
},
|
},
|
||||||
"private": true
|
"private": true
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user