feat: Update index.tsx with features
Coordinate converter, todo list, saved coordinates, motd creator Signed-off-by: SindreKjelsrud <sindre@kjelsrud.dev>
This commit is contained in:
parent
fd2e3507ce
commit
978e60c6d3
3 changed files with 132 additions and 11 deletions
|
@ -1,5 +1,9 @@
|
|||
import { Stack } from "expo-router";
|
||||
|
||||
export default function RootLayout() {
|
||||
return <Stack />;
|
||||
return (
|
||||
<Stack>
|
||||
<Stack.Screen name="index" options={{ headerShown: false }} />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,15 +1,79 @@
|
|||
import { Text, View } from "react-native";
|
||||
import { Link } from "expo-router";
|
||||
import { ImageBackground, Text, TouchableOpacity, View } from "react-native";
|
||||
import { styles } from "./styles";
|
||||
|
||||
// Placeholder images - replace with actual local images!
|
||||
const netherImage = {
|
||||
uri: "https://s1.qwant.com/thumbr/474x248/2/4/a24db6c90af628d74cc6f90c2a9c710035c23f71bbe60306da8c15048e3f0a/OIP.joos3K71NDyUnFa8KyqxmwHaD4.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.joos3K71NDyUnFa8KyqxmwHaD4%3Fpid%3DApi&q=0&b=1&p=0&a=0",
|
||||
};
|
||||
const todoImage = {
|
||||
uri: "https://s1.qwant.com/thumbr/474x266/9/3/2f1096a5a780b8a5170c7f33984b1862d42724cdb70096f40df193dd4b8f76/OIP.KbL45cxF3QbBxlw-0fl2mQHaEK.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.KbL45cxF3QbBxlw-0fl2mQHaEK%3Fpid%3DApi&q=0&b=1&p=0&a=0",
|
||||
};
|
||||
const coordinatesImage = {
|
||||
uri: "https://s1.qwant.com/thumbr/474x355/a/9/00d5edea1b711b9e35c9635bcbfcd537e3a40e81f9387482244c0bcd0daea2/OIP.ZkcHYuA3X2kzJCVpLk9rHQHaFj.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.ZkcHYuA3X2kzJCVpLk9rHQHaFj%3Fpid%3DApi&q=0&b=1&p=0&a=0",
|
||||
};
|
||||
const motdImage = {
|
||||
uri: "https://s1.qwant.com/thumbr/474x270/3/6/a8f9c3fe42ffaf1d234f19d7f669586eec59661cd788a047e5d9c4db3b7e6b/OIP.MSaLxXZ2qYeCextEVZckJgHaEO.jpg?u=https%3A%2F%2Ftse.mm.bing.net%2Fth%2Fid%2FOIP.MSaLxXZ2qYeCextEVZckJgHaEO%3Fpid%3DApi&q=0&b=1&p=0&a=0",
|
||||
};
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text>Edit app/index.tsx to edit this screen.</Text>
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Minecraft Tools</Text>
|
||||
|
||||
<View style={styles.gridContainer}>
|
||||
{/* Coordinate Converter */}
|
||||
<View style={styles.gridItem}>
|
||||
<Link href="/coordinate-converter" asChild style={styles.touchableWrapper}>
|
||||
<TouchableOpacity style={styles.touchableWrapper}>
|
||||
<ImageBackground source={netherImage} style={styles.imageBackground} resizeMode="cover">
|
||||
<View style={styles.overlay}>
|
||||
<Text style={styles.linkButtonText}>Coordinate Converter (Nether / Overworld)</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</TouchableOpacity>
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
{/* Todo List */}
|
||||
<View style={styles.gridItem}>
|
||||
<Link href="/todo" asChild style={styles.touchableWrapper}>
|
||||
<TouchableOpacity style={styles.touchableWrapper}>
|
||||
<ImageBackground source={todoImage} style={styles.imageBackground} resizeMode="cover">
|
||||
<View style={styles.overlay}>
|
||||
<Text style={styles.linkButtonText}>Todo List</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</TouchableOpacity>
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
{/* Saved Coordinates */}
|
||||
<View style={styles.gridItem}>
|
||||
<Link href="/coordinates" asChild style={styles.touchableWrapper}>
|
||||
<TouchableOpacity style={styles.touchableWrapper}>
|
||||
<ImageBackground source={coordinatesImage} style={styles.imageBackground} resizeMode="cover">
|
||||
<View style={styles.overlay}>
|
||||
<Text style={styles.linkButtonText}>Saved Coordinates</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</TouchableOpacity>
|
||||
</Link>
|
||||
</View>
|
||||
|
||||
{/* MOTD Creator */}
|
||||
<View style={styles.gridItem}>
|
||||
<Link href="/motd" asChild style={styles.touchableWrapper}>
|
||||
<TouchableOpacity style={styles.touchableWrapper}>
|
||||
<ImageBackground source={motdImage} style={styles.imageBackground} resizeMode="cover">
|
||||
<View style={styles.overlay}>
|
||||
<Text style={styles.linkButtonText}>MOTD Creator</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</TouchableOpacity>
|
||||
</Link>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
53
app/styles.ts
Normal file
53
app/styles.ts
Normal file
|
@ -0,0 +1,53 @@
|
|||
// styles.ts
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: "#2e2e2e",
|
||||
},
|
||||
title: {
|
||||
fontSize: 38,
|
||||
fontWeight: "bold",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
paddingTop: 60,
|
||||
marginBottom: 20,
|
||||
textShadowColor: "rgba(0, 0, 0, 0.75)",
|
||||
textShadowOffset: { width: 2, height: 2 },
|
||||
textShadowRadius: 5,
|
||||
},
|
||||
gridContainer: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
flexWrap: "wrap",
|
||||
},
|
||||
gridItem: {
|
||||
width: "50%",
|
||||
height: "50%",
|
||||
},
|
||||
touchableWrapper: {
|
||||
flex: 1,
|
||||
},
|
||||
imageBackground: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 10,
|
||||
},
|
||||
overlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
linkButtonText: {
|
||||
color: "#fff",
|
||||
fontSize: 20,
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
textShadowColor: "rgba(0, 0, 0, 0.7)",
|
||||
textShadowOffset: { width: 1, height: 1 },
|
||||
textShadowRadius: 3,
|
||||
},
|
||||
});
|
Loading…
Add table
Reference in a new issue