changes to tablet detection and more

components/pages/(tablet_pages)/ViewSwitch.tsx

@@ -1,10 +1,20 @@
 import { Text, TouchableOpacity, View } from "react-native-ui-lib";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { StyleSheet } from "react-native";
+import { NavigationProp } from "@react-navigation/native";
+import view from "react-native-ui-lib/src/components/view";
 
-const ViewSwitch = () => {
-  const [view, setView] = useState<boolean>(false);
+interface ViewSwitchProps {
+  navigation: NavigationProp<any>; // Adjust according to your navigation structure
+}
 
+const ViewSwitch: React.FC<ViewSwitchProps> = ({ navigation }) => {
+  const [pageIndex, setPageIndex] = useState<number>(navigation.getState().index);
+
+  useEffect(() => {
+    setPageIndex(navigation.getState().index);
+  }, [navigation.getState().index])
+  
   return (
     <View
       row
@@ -26,7 +36,7 @@ const ViewSwitch = () => {
     >
       <TouchableOpacity
         onPress={() => {
-          setView(true);
+          navigation.navigate("calendar");
         }}
       >
         <View
@@ -34,9 +44,9 @@ const ViewSwitch = () => {
           centerH
           height={54}
           paddingH-15
-          style={view ? styles.switchBtnActive : styles.switchBtn}
+          style={ pageIndex == 1 || pageIndex == 0 ? styles.switchBtnActive : styles.switchBtn}
         >
-          <Text color={view ? "white" : "black"} style={styles.switchTxt}>
+          <Text color={pageIndex == 1 || pageIndex == 0 ? "white" : "black"} style={styles.switchTxt}>
             Calendar
           </Text>
         </View>
@@ -44,7 +54,7 @@ const ViewSwitch = () => {
 
       <TouchableOpacity
         onPress={() => {
-          setView(false);
+          navigation.navigate("todos");
         }}
       >
         <View
@@ -52,9 +62,9 @@ const ViewSwitch = () => {
           centerH
           height={54}
           paddingH-15
-          style={!view ? styles.switchBtnActive : styles.switchBtn}
+          style={pageIndex == 6 ? styles.switchBtnActive : styles.switchBtn}
         >
-          <Text color={!view ? "white" : "black"} style={styles.switchTxt}>
+          <Text color={pageIndex == 6 ? "white" : "black"} style={styles.switchTxt}>
             Chores
           </Text>
         </View>

components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx

@@ -1,56 +1,29 @@
 import { View, Text } from "react-native-ui-lib";
 import React, { useEffect } from "react";
 import * as ScreenOrientation from "expo-screen-orientation";
-import { Dimensions, StyleSheet } from "react-native";
 import { InnerCalendar } from "../../calendar/InnerCalendar";
-
-const { width, height } = Dimensions.get("window");
+import TabletContainer from "../tablet_components/TabletContainer";
 
 const TabletCalendarPage = () => {
-  // Function to lock the screen orientation to landscape
   const lockScreenOrientation = async () => {
     await ScreenOrientation.lockAsync(
-      ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
+      ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
     );
   };
 
   useEffect(() => {
-    lockScreenOrientation(); // Lock orientation when the component mounts
+    lockScreenOrientation();
 
     return () => {
-      // Optional: Unlock to default when the component unmounts
       ScreenOrientation.unlockAsync();
     };
   }, []);
 
   return (
-    <View style={styles.container}>
-      <View row>
-        <View style={styles.calendarContainer}>
-          <InnerCalendar />
-        </View>
-        <View style={styles.profilesContainer}></View>
-      </View>
-    </View>
+    <TabletContainer>
+      <InnerCalendar />
+    </TabletContainer>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: "white",
-    width: "100%",
-    flex: 1,
-  },
-  calendarContainer: {
-    backgroundColor: "white",
-    height: height,
-    width: width * 0.85,
-  },
-  profilesContainer: {
-    width: width * 0.15,
-    backgroundColor: "green",
-    height: height,
-  },
-});
-
 export default TabletCalendarPage;

components/pages/(tablet_pages)/chores/TabletChoresPage.tsx

@@ -5,7 +5,7 @@ import * as ScreenOrientation from 'expo-screen-orientation';
 const TabletChoresPage = () => {
   // Function to lock the screen orientation to landscape
   const lockScreenOrientation = async () => {
-    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_LEFT);
+    await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT);
   };
 
   useEffect(() => {

components/pages/(tablet_pages)/tablet_components/TabletContainer.tsx

@@ -0,0 +1,46 @@
+import { View, Text, ViewProps } from "react-native-ui-lib";
+import React, { ReactNode } from "react";
+import { Dimensions, StyleSheet } from "react-native";
+import UsersList from "./UsersList";
+
+interface TabletContainerProps extends ViewProps {
+  children: ReactNode;
+}
+
+const { width, height } = Dimensions.get("window");
+
+const TabletContainer: React.FC<TabletContainerProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <View style={styles.container}>
+      <View row>
+        <View style={styles.calendarContainer}>{children}</View>
+        <View style={styles.profilesContainer}>
+          <UsersList />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "white",
+    width: "100%",
+    flex: 1,
+  },
+  calendarContainer: {
+    backgroundColor: "white",
+    height: height,
+    width: width * 0.85,
+  },
+  profilesContainer: {
+    width: width * 0.15,
+    backgroundColor: "green",
+    height: height,
+  },
+});
+
+export default TabletContainer;

components/pages/(tablet_pages)/tablet_components/UsersList.tsx

@@ -0,0 +1,27 @@
+import { View, Text } from "react-native-ui-lib";
+import React from "react";
+
+const UsersList = () => {
+  return (
+    <View centerH gap-20>
+      <View
+        style={{
+          aspectRatio: 1,
+          width: 113,
+          backgroundColor: "red",
+          borderRadius: 100,
+        }}
+      />
+      <View
+        style={{
+          aspectRatio: 1,
+          width: 113,
+          backgroundColor: "red",
+          borderRadius: 100,
+        }}
+      />
+    </View>
+  );
+};
+
+export default UsersList;