From c223989e9f36bcfc043d1a4af682d4d7537bd5e9 Mon Sep 17 00:00:00 2001
From: StarAppeal <info@starappeal.app>
Date: Fri, 6 Dec 2024 23:02:26 +0100
Subject: [PATCH] add a simple page for the Screens in tab

---
 app/(tabs)/_layout.tsx     | 51 ++++++++++++++++++++++++++++++++------
 app/(tabs)/modes/clock.tsx | 12 +++++++++
 app/(tabs)/modes/image.tsx | 13 ++++++++++
 app/(tabs)/modes/music.tsx | 13 ++++++++++
 app/(tabs)/settings.tsx    | 12 +++++++++
 5 files changed, 93 insertions(+), 8 deletions(-)

diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
index b1dd9c1..ad2a869 100644
--- a/app/(tabs)/_layout.tsx
+++ b/app/(tabs)/_layout.tsx
@@ -1,6 +1,6 @@
-import {Tabs} from 'expo-router';
+import {Link, Tabs} from 'expo-router';
 import React from "react";
-import {FontAwesome} from "@expo/vector-icons";
+import {Feather} from "@expo/vector-icons";
 import {useTheme} from "@/src/context/ThemeProvider";
 import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper";
 
@@ -19,6 +19,15 @@ export default function TabLayout() {
                     headerTitleContainerStyle: {
                         paddingHorizontal: 16,
                     },
+                    headerRight: () => (
+                        <Link href="/settings" style={{marginRight: 16}}>
+                            <Feather
+                                name="settings"
+                                size={24}
+                                color={theme.theme.colors.onPrimaryContainer}
+                            />
+                        </Link>
+                    ),
                     tabBarActiveTintColor: theme.theme.colors.primary,
                     tabBarInactiveTintColor: theme.theme.colors.onSurfaceVariant,
                     tabBarStyle: {
@@ -32,25 +41,51 @@ export default function TabLayout() {
                     name={'modes/text'}
                     options={{
                         title: 'Text',
-                        tabBarIcon: ({color}) => <FontAwesome size={28} name="file-text" color={color}/>,
+                        tabBarIcon: ({color}) => <Feather size={28} name="type" color={color}/>,
                     }}
                 />
+
+                <Tabs.Screen
+                    name={'modes/image'}
+                    options={{
+                        title: 'Bilder',
+                        tabBarIcon: ({color}) => <Feather size={28} name="image" color={color}/>,
+                    }}/>
+
                 <Tabs.Screen
                     name="index"
                     options={{
-                        title: 'Home',
-                        tabBarIcon: ({color}) => <FontAwesome size={28} name="home" color={color}/>,
+                        title: 'Startseite',
+                        tabBarIcon: ({color}) => <Feather size={28} name="home" color={color}/>,
                     }}
                 />
+
+
+                <Tabs.Screen
+                    name={'modes/music'}
+                    options={{
+                        title: 'Musik',
+                        tabBarIcon: ({color}) => <Feather size={28} name="music" color={color}/>,
+                    }}/>
+
+
+                <Tabs.Screen
+                    name={'modes/clock'}
+                    options={{
+                        title: 'Uhr',
+                        tabBarIcon: ({color}) => <Feather size={28} name="clock" color={color}/>,
+                    }}/>
+
                 <Tabs.Screen
                     name="settings"
                     options={{
-                        title: 'Settings',
-                        tabBarIcon: ({color}) => <FontAwesome size={28} name="cog" color={color}/>,
+                        title: 'Einstellungen',
+                        href: null, // prevents showing in the tab bar
                     }}
                 />
             </Tabs>
         </AuthenticatedWrapper>
 
-    );
+    )
+        ;
 }
diff --git a/app/(tabs)/modes/clock.tsx b/app/(tabs)/modes/clock.tsx
index e69de29..171e7fa 100644
--- a/app/(tabs)/modes/clock.tsx
+++ b/app/(tabs)/modes/clock.tsx
@@ -0,0 +1,12 @@
+import ThemedHeader from "@/src/components/themed/ThemedHeader";
+import ThemedBackground from "@/src/components/themed/ThemedBackground";
+
+export default function ClockScreen() {
+    return (
+        <ThemedBackground>
+            <ThemedHeader>
+                Clock Mode
+            </ThemedHeader>
+        </ThemedBackground>
+    );
+}
diff --git a/app/(tabs)/modes/image.tsx b/app/(tabs)/modes/image.tsx
index e69de29..9196bec 100644
--- a/app/(tabs)/modes/image.tsx
+++ b/app/(tabs)/modes/image.tsx
@@ -0,0 +1,13 @@
+import ThemedHeader from "@/src/components/themed/ThemedHeader";
+import React from "react";
+import ThemedBackground from "@/src/components/themed/ThemedBackground";
+
+export default function ImageScreen() {
+    return (
+        <ThemedBackground>
+            <ThemedHeader>
+                Image Mode
+            </ThemedHeader>
+        </ThemedBackground>
+    );
+}
diff --git a/app/(tabs)/modes/music.tsx b/app/(tabs)/modes/music.tsx
index e69de29..9fed52e 100644
--- a/app/(tabs)/modes/music.tsx
+++ b/app/(tabs)/modes/music.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ThemedBackground from "@/src/components/themed/ThemedBackground";
+import ThemedHeader from "@/src/components/themed/ThemedHeader";
+
+export default function MusicScreen() {
+    return (
+        <ThemedBackground>
+            <ThemedHeader>
+                Music Mode
+            </ThemedHeader>
+        </ThemedBackground>
+    );
+}
diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx
index 8b13789..33afb43 100644
--- a/app/(tabs)/settings.tsx
+++ b/app/(tabs)/settings.tsx
@@ -1 +1,13 @@
+import ThemedHeader from "@/src/components/themed/ThemedHeader";
+import React from "react";
+import ThemedBackground from "@/src/components/themed/ThemedBackground";
 
+export default function SettingsScreen() {
+    return (
+        <ThemedBackground>
+            <ThemedHeader>
+                Settings
+            </ThemedHeader>
+        </ThemedBackground>
+    );
+}