added tablet view

components/pages/(tablet_pages)/ViewSwitch.tsx

@@ -0,0 +1,83 @@
+import { Text, TouchableOpacity, View } from "react-native-ui-lib";
+import React, { useState } from "react";
+import { StyleSheet } from "react-native";
+
+const ViewSwitch = () => {
+  const [view, setView] = useState<boolean>(false);
+
+  return (
+    <View
+      row
+      spread
+      style={{
+        borderRadius: 30,
+        backgroundColor: "#ebebeb",
+        alignItems: "center",
+        justifyContent: "center",
+        // iOS shadow
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0,
+        shadowRadius: 0,
+        // Android shadow (elevation)
+        elevation: 0,
+      }}
+      centerV
+    >
+      <TouchableOpacity
+        onPress={() => {
+          setView(true);
+        }}
+      >
+        <View
+          centerV
+          centerH
+          height={54}
+          paddingH-15
+          style={view ? styles.switchBtnActive : styles.switchBtn}
+        >
+          <Text color={view ? "white" : "black"} style={styles.switchTxt}>
+            Calendar
+          </Text>
+        </View>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          setView(false);
+        }}
+      >
+        <View
+          centerV
+          centerH
+          height={54}
+          paddingH-15
+          style={!view ? styles.switchBtnActive : styles.switchBtn}
+        >
+          <Text color={!view ? "white" : "black"} style={styles.switchTxt}>
+            Chores
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default ViewSwitch;
+
+const styles = StyleSheet.create({
+  switchBtnActive: {
+    backgroundColor: "#ea156c",
+    borderRadius: 50,
+    width: 110,
+  },
+  switchBtn: {
+    backgroundColor: "#ebebeb",
+    borderRadius: 50,
+    width: 110,
+  },
+  switchTxt: {
+    fontSize: 16,
+    fontFamily: "Manrope_600SemiBold",
+  },
+});

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

@@ -0,0 +1,56 @@
+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");
+
+const TabletCalendarPage = () => {
+  // Function to lock the screen orientation to landscape
+  const lockScreenOrientation = async () => {
+    await ScreenOrientation.lockAsync(
+      ScreenOrientation.OrientationLock.LANDSCAPE_LEFT
+    );
+  };
+
+  useEffect(() => {
+    lockScreenOrientation(); // Lock orientation when the component mounts
+
+    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>
+  );
+};
+
+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

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { View, Text } from 'react-native';
+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);
+  };
+
+  useEffect(() => {
+    lockScreenOrientation();  // Lock orientation when the component mounts
+
+    return () => {
+      // Optional: Unlock to default when the component unmounts
+      ScreenOrientation.unlockAsync();
+    };
+  }, []);
+
+  return (
+    <View>
+      <Text>TabletChoresPage</Text>
+    </View>
+  );
+};
+
+export default TabletChoresPage;