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:
Sid 2025-07-05 13:10:10 +02:00
parent fd2e3507ce
commit 978e60c6d3
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
3 changed files with 132 additions and 11 deletions

View file

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

View file

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