added tablet view

2025-11-26 00:24:53 +00:00 · 2024-10-24 21:34:12 +02:00
parent ae01b9daaf
commit 36ebfc38aa
13 changed files with 213 additions and 31 deletions
--- a/app/(auth)/_layout.tsx
+++ b/app/(auth)/_layout.tsx
@ -6,7 +6,7 @@ import {
  DrawerItem,
  DrawerItemList,
 } from "@react-navigation/drawer";
-import { Button, View, Text, ButtonSize } from "react-native-ui-lib";
+import { Button, View, Text, ButtonSize, Constants } from "react-native-ui-lib";
 import { StyleSheet } from "react-native";
 import Feather from "@expo/vector-icons/Feather";
 import DrawerButton from "@/components/shared/DrawerButton";
@ -23,6 +23,7 @@ import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 import NavBrainDumpIcon from "@/assets/svgs/NavBrainDumpIcon";
 import NavCalendarIcon from "@/assets/svgs/NavCalendarIcon";
 import NavSettingsIcon from "@/assets/svgs/NavSettingsIcon";
+import ViewSwitch from "@/components/pages/(tablet_pages)/ViewSwitch";

 export default function TabLayout() {
  const { mutateAsync: signOut } = useSignOut();
@ -33,6 +34,12 @@ export default function TabLayout() {
      detachInactiveScreens
      screenOptions={{
        headerShown: true,
+        headerRight: () =>
+          Constants.isTablet ? (
+            <ViewSwitch />
+          ) : (
+            <></>
+          ),
        drawerStyle: {
          width: "90%",
          backgroundColor: "#f9f8f7",
@ -203,7 +210,7 @@ const styles = StyleSheet.create({
  label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
  title: {
    fontSize: 26.13,
-    fontFamily: 'Manrope_600SemiBold',
-    color: "#262627"
-  }
+    fontFamily: "Manrope_600SemiBold",
+    color: "#262627",
+  },
 });
--- a/app/(auth)/calendar/index.tsx
+++ b/app/(auth)/calendar/index.tsx
@ -1,8 +1,8 @@
 import React from "react";
 import CalendarPage from "@/components/pages/calendar/CalendarPage";
+import { Constants } from "react-native-ui-lib";
+import TabletCalendarPage from "@/components/pages/(tablet_pages)/calendar/TabletCalendarPage";

 export default function Screen() {
-    return (
-        <CalendarPage/>
-    );
+  return <>{Constants.isTablet ? <TabletCalendarPage /> : <CalendarPage />}</>;
 }
--- a/app/(auth)/todos/index.tsx
+++ b/app/(auth)/todos/index.tsx
@ -1,3 +1,4 @@
+import TabletChoresPage from "@/components/pages/(tablet_pages)/chores/TabletChoresPage";
 import AddChore from "@/components/pages/todos/AddChore";
 import ProgressCard from "@/components/pages/todos/ProgressCard";
 import ToDoItem from "@/components/pages/todos/ToDoItem";
@ -8,12 +9,12 @@ import { useAuthContext } from "@/contexts/AuthContext";
 import { ToDosContextProvider, useToDosContext } from "@/contexts/ToDosContext";
 import { AntDesign } from "@expo/vector-icons";
 import { ScrollView } from "react-native-gesture-handler";
-import { Button, ButtonSize, View, Text } from "react-native-ui-lib";
+import { Button, ButtonSize, View, Text, Constants } from "react-native-ui-lib";

 export default function Screen() {
  return (
    <ToDosContextProvider>
-      <ToDosPage />
+      {Constants.isTablet ? <TabletChoresPage /> : <ToDosPage />}
    </ToDosContextProvider>
  );
 }
--- a/assets/svgs/MenuIcon.tsx
+++ b/assets/svgs/MenuIcon.tsx
@ -7,8 +7,8 @@ interface MenuIconProps extends SvgProps {

 const MenuIcon: React.FC<MenuIconProps> = (props) => (
  <Svg
-    width={24}
-    height={16}
+    width={props.width || 24}
+    height={props.height || 16}
    viewBox="0 0 24 16"
    fill="none"
    {...props}
--- a/assets/svgs/NavBrainDumpIcon.tsx
+++ b/assets/svgs/NavBrainDumpIcon.tsx
@ -1,14 +1,15 @@
-import * as React from "react"
-import Svg, { Path, SvgProps } from "react-native-svg"
+import * as React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
 const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
  <Svg
-    width={22}
-    height={28}
+    width={props.width || 22}
+    height={props.height || 28}
+    viewBox="0 0 22 28"
    fill="none"
    {...props}
  >
    <Path
-      stroke="#F90"
+      stroke={props.color || "#F90"}
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeMiterlimit={10}
@ -16,7 +17,7 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
      d="M21.1.859H3.994C2.284.859.976 2.167.976 3.877c0 1.71 1.308 3.019 3.018 3.019H21.1V27.02"
    />
    <Path
-      stroke="#F90"
+      stroke={props.color || "#F90"}
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeMiterlimit={10}
@ -24,7 +25,7 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
      d="M21.1 27.021H3.994c-1.71 0-3.018-1.308-3.018-3.018V3.878M21.097 3.878H3.991"
    />
    <Path
-      stroke="#F90"
+      stroke={props.color || "#F90"}
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeMiterlimit={10}
@ -32,5 +33,5 @@ const NavBrainDumpIcon: React.FC<SvgProps> = (props) => (
      d="M6.007 6.897v12.075l3.019-1.006 3.018 1.006V6.897"
    />
  </Svg>
-)
-export default NavBrainDumpIcon
+);
+export default NavBrainDumpIcon;
--- a/assets/svgs/NavCalendarIcon.tsx
+++ b/assets/svgs/NavCalendarIcon.tsx
@ -1,9 +1,9 @@
-import * as React from "react"
-import Svg, { Path, SvgProps } from "react-native-svg"
+import * as React from "react";
+import Svg, { Path, SvgProps } from "react-native-svg";
 const NavCalendarIcon: React.FC<SvgProps> = (props) => (
  <Svg
-    width={28}
-    height={28}
+    width={props.width || 28}
+    height={props.height || 28}
    viewBox="0 0 28 28"
    fill="none"
    {...props}
@ -16,5 +16,5 @@ const NavCalendarIcon: React.FC<SvgProps> = (props) => (
      d="M1.825 10.075h25.043m-5.565 5.567L7.39 15.64m4.638 5.566H7.39m0-19.478V4.51m13.913-2.782V4.51M6.277 26.77h16.139c1.558 0 2.337 0 2.933-.303.523-.267.949-.692 1.216-1.216.303-.595.303-1.375.303-2.933V8.962c0-1.558 0-2.337-.303-2.933a2.782 2.782 0 0 0-1.216-1.216c-.596-.303-1.375-.303-2.933-.303H6.277c-1.558 0-2.337 0-2.933.303-.523.267-.949.693-1.216 1.216-.303.596-.303 1.375-.303 2.933v13.356c0 1.558 0 2.338.303 2.933.267.523.693.95 1.216 1.216.596.303 1.375.303 2.933.303Z"
    />
  </Svg>
-)
-export default NavCalendarIcon
+);
+export default NavCalendarIcon;
--- a/assets/svgs/NavGroceryIcon.tsx
+++ b/assets/svgs/NavGroceryIcon.tsx
@ -2,17 +2,18 @@ import * as React from "react";
 import Svg, { Path, SvgProps } from "react-native-svg";
 const NavGroceryIcon: React.FC<SvgProps> = (props) => (
  <Svg
-    width={29}
-    height={32}
+    width={props.width || 29}
+    height={props.width || 32}
+    viewBox="0 0 29 32"
    fill="none"
    {...props}
  >
    <Path
-      fill="#50BE0C"
+      fill={props.color || "#50BE0C"}
      d="M27.8 12c-.888-2.27-2.662-4.14-4.983-4.956-2.518-.883-5.143-.382-7.636.307-.047-1.362.068-2.728.262-4.076.11-.761.634-2.335-.668-2.389-1.081-.045-1.084 1.402-1.19 2.14-.203 1.416-.323 2.85-.284 4.281-.599-.1-1.19-.322-1.787-.446a13.485 13.485 0 0 0-2.704-.3c-1.752 0-3.48.465-4.922 1.479C1.09 10.01 0 13.446.046 16.747c.052 3.575 1.263 6.99 3.3 9.905.899 1.288 1.932 2.522 3.21 3.451 1.241.903 2.628 1.325 4.133 1.54.64.093 1.29.096 1.927-.009.557-.09 1.078-.325 1.63-.419.417-.07 1.005.258 1.408.348a6.297 6.297 0 0 0 2.096.107c2.563-.292 4.594-1.449 6.28-3.387 3.71-4.264 5.921-10.791 3.77-16.284Zm-1.69 8.743c-.474 1.663-1.225 3.182-2.195 4.608-.86 1.263-1.855 2.514-3.131 3.377-1.172.79-2.76 1.223-4.173 1.093-.719-.065-1.373-.41-2.087-.478-.8-.076-1.538.352-2.318.459-3.064.416-5.485-1.665-7.146-3.972-2.04-2.831-3.249-6.214-3.134-9.732.106-3.223 1.643-6.55 4.998-7.432 1.678-.44 3.446-.188 5.099.238.715.183 1.454.48 2.196.52.572.066 1.2-.196 1.74-.344 3.233-.89 6.873-1.105 9.124 1.855 2.08 2.732 1.925 6.666 1.027 9.808Z"
    />
    <Path
-      fill="#50BE0C"
+      fill={props.color || "#50BE0C"}
      d="M12 17.966c-.778.285-1.977.71-2.432 1.454.11-.183.221-.363-.002.002-.222.365-.113.186-.001.003-.668 1.099.272 2.53 1.547 2.347 1.258-.18 1.378-1.419 1.364-2.443a8.822 8.822 0 0 0-.095-1.282c-.043-.264-.157-.164-.382-.08ZM18.096 18.917c-.435-.304-.919-.542-1.405-.752-.118-.05-.698-.375-.832-.297.018-.01.036-.021 0 0-.036.023-.02.012-.001.001-.11.07-.096.609-.104.716a9.003 9.003 0 0 0-.01 1.534c.1 1.117 1.049 2.082 2.228 1.517 1.165-.558 1.095-2.04.124-2.719ZM12.223 3.815C12.343.28 8.347-.271 6.922.432c.371 4.075 3.48 4.164 5.301 3.383Z"
    />
  </Svg>
--- a/assets/svgs/NavToDosIcon.tsx
+++ b/assets/svgs/NavToDosIcon.tsx
@ -3,7 +3,7 @@ import Svg, { Path, SvgProps } from "react-native-svg"
 const NavToDosIcon: React.FC<SvgProps> = (props) => (
  <Svg
    width={props.width || 30}
-    height={props.width || 30}
+    height={props.height || 30}
    viewBox="0 0 30 30"
    fill="none"
    {...props}
--- a/components/pages/(tablet_pages)/ViewSwitch.tsx
+++ b/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",
+  },
+});
--- a/components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx
+++ b/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;
--- a/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx
+++ b/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;
--- a/package.json
+++ b/package.json
@ -60,6 +60,7 @@
    "expo-localization": "~15.0.3",
    "expo-notifications": "~0.28.18",
    "expo-router": "~3.5.20",
+    "expo-screen-orientation": "~7.0.5",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
--- a/yarn.lock
+++ b/yarn.lock
@ -5232,6 +5232,11 @@ expo-router@~3.5.20:
    react-native-helmet-async "2.0.4"
    schema-utils "^4.0.1"

+expo-screen-orientation@~7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/expo-screen-orientation/-/expo-screen-orientation-7.0.5.tgz#0a517982151c6519fa4b10ce27047de39c1f92cf"
+  integrity sha512-1j0MzVzYpjKQo4BWowQ3ZYwC3OnddX/8k06C8VYTAxMyd8ou1k+rG4tm+GIV2n2RSzc3g7cfPlQwSYr3/SGmbg==
+
 expo-splash-screen@0.27.5, expo-splash-screen@~0.27.5:
  version "0.27.5"
  resolved "https://registry.npmjs.org/expo-splash-screen/-/expo-splash-screen-0.27.5.tgz"