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

This commit is contained in:
Filip Rojek 2024-05-08 21:18:47 +02:00
parent e62ef8695b
commit b17cf25970
15 changed files with 15591 additions and 15222 deletions

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

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

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

View 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%",
},
});

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

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

View File

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

View File

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

View File

@ -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",
},
},
],
],
};
};

View File

@ -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 }) => [

View 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;

View 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;

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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
}