From e5312288d97d6b3585728eab3d4d681820b96a9a Mon Sep 17 00:00:00 2001
From: Kenneth <kennethnym@outlook.com>
Date: Wed, 25 Sep 2024 21:40:59 +0100
Subject: [PATCH] feat: add about page

---
 app/(tabs)/_layout.tsx |  8 +++---
 app/(tabs)/about.tsx   | 56 ++++++++++++++++++++++++++++++++++++++++++
 app/(tabs)/explore.tsx |  5 ----
 app/wallpaper.tsx      |  2 +-
 4 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 app/(tabs)/about.tsx
 delete mode 100644 app/(tabs)/explore.tsx

diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index dfa7c15..f4c3747 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -28,12 +28,14 @@ export default function TabLayout() {
 				}}
 			/>
 			<Tabs.Screen
-				name="explore"
+				name="about"
 				options={{
-					title: "Explore",
+					title: "About",
 					tabBarIcon: ({ color, focused }) => (
 						<TabBarIcon
-							name={focused ? "code-slash" : "code-slash-outline"}
+							name={
+								focused ? "information-circle" : "information-circle-outline"
+							}
 							color={color}
 						/>
 					),
diff --git a/app/(tabs)/about.tsx b/app/(tabs)/about.tsx
new file mode 100644
index 0000000..edc0b2a
--- /dev/null
+++ b/app/(tabs)/about.tsx
@@ -0,0 +1,56 @@
+import { View, Text, TouchableOpacity } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import * as Linking from "expo-linking";
+
+export default function AboutPage() {
+	return (
+		<SafeAreaView className="flex-1 items-start p-4">
+			<Text className="pt-20 text-4xl font-bold text-white mb-4">About</Text>
+			<View className="flex-col">
+				<AboutItem
+					title="Source Code"
+					description="Source code is available on GitHub"
+					onPress={() => {
+						Linking.openURL("https://github.com/kennethnym/doors-wallpaper");
+					}}
+				/>
+				<AboutItem
+					title="Request wallpaper"
+					description="Request wallpaper through my email"
+					onPress={() => {
+						Linking.openURL("mailto:kennethnym@outlook.com");
+					}}
+				/>
+				<AboutItem
+					title="Find me on X (formerly Twitter)"
+					description="@kennethnym"
+					onPress={() => {
+						Linking.openURL("https://x.com/kennethnym");
+					}}
+				/>
+				<AboutItem
+					title="Find me on GitHub"
+					description="@kennethnym"
+					onPress={() => {
+						Linking.openURL("https://github.com/kennethnym");
+					}}
+				/>
+			</View>
+		</SafeAreaView>
+	);
+}
+
+function AboutItem({
+	title,
+	description,
+	onPress,
+}: { title: string; description: string; onPress: () => void }) {
+	return (
+		<TouchableOpacity onPress={onPress}>
+			<View className="flex-col items-start pb-3">
+				<Text className="text-lg font-bold text-white">{title}</Text>
+				<Text className="text-white opacity-50">{description}</Text>
+			</View>
+		</TouchableOpacity>
+	);
+}
diff --git a/app/(tabs)/explore.tsx b/app/(tabs)/explore.tsx
deleted file mode 100644
index cb2391c..0000000
--- a/app/(tabs)/explore.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { View } from "react-native";
-
-export default function TabTwoScreen() {
-	return <View />;
-}
diff --git a/app/wallpaper.tsx b/app/wallpaper.tsx
index 9bc2aa1..e5a7d38 100644
--- a/app/wallpaper.tsx
+++ b/app/wallpaper.tsx
@@ -88,7 +88,7 @@ export default function WallpaperPage() {
 					{selectedWallpaper.creator_name ? (
 						<Text className="text-white text-center opacity-50 text-xs">
 							{selectedWallpaper.creator_name}
-							{selectedWallpaper.is_ai_generated ? "· AI Generated" : ""}
+							{selectedWallpaper.is_ai_generated ? " · AI Generated" : ""}
 						</Text>
 					) : null}
 					{selectedWallpaper.source_url ? (