diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx index 2b7927b..5edd485 100644 --- 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 ? ( + + ) : ( + <> + ), 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", + }, }); diff --git a/app/(auth)/calendar/index.tsx b/app/(auth)/calendar/index.tsx index 1b239ac..8d47936 100644 --- 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 ( - - ); + return <>{Constants.isTablet ? : }; } diff --git a/app/(auth)/todos/index.tsx b/app/(auth)/todos/index.tsx index 7ccb813..518f346 100644 --- 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 ( - + {Constants.isTablet ? : } ); } diff --git a/assets/svgs/MenuIcon.tsx b/assets/svgs/MenuIcon.tsx index ad114a9..f54091a 100644 --- a/assets/svgs/MenuIcon.tsx +++ b/assets/svgs/MenuIcon.tsx @@ -7,8 +7,8 @@ interface MenuIconProps extends SvgProps { const MenuIcon: React.FC = (props) => ( = (props) => ( = (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" /> = (props) => ( d="M21.1 27.021H3.994c-1.71 0-3.018-1.308-3.018-3.018V3.878M21.097 3.878H3.991" /> = (props) => ( d="M6.007 6.897v12.075l3.019-1.006 3.018 1.006V6.897" /> -) -export default NavBrainDumpIcon +); +export default NavBrainDumpIcon; diff --git a/assets/svgs/NavCalendarIcon.tsx b/assets/svgs/NavCalendarIcon.tsx index 5744643..c7db638 100644 --- 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 = (props) => ( = (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" /> -) -export default NavCalendarIcon +); +export default NavCalendarIcon; diff --git a/assets/svgs/NavGroceryIcon.tsx b/assets/svgs/NavGroceryIcon.tsx index cb219b8..3bda0bf 100644 --- 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 = (props) => ( diff --git a/assets/svgs/NavToDosIcon.tsx b/assets/svgs/NavToDosIcon.tsx index 9592aa3..1da328d 100644 --- 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 = (props) => ( { + const [view, setView] = useState(false); + + return ( + + { + setView(true); + }} + > + + + Calendar + + + + + { + setView(false); + }} + > + + + Chores + + + + + ); +}; + +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", + }, +}); diff --git a/components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx b/components/pages/(tablet_pages)/calendar/TabletCalendarPage.tsx new file mode 100644 index 0000000..3e709e0 --- /dev/null +++ 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 ( + + + + + + + + + ); +}; + +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; diff --git a/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx b/components/pages/(tablet_pages)/chores/TabletChoresPage.tsx new file mode 100644 index 0000000..3bf40d8 --- /dev/null +++ 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 ( + + TabletChoresPage + + ); +}; + +export default TabletChoresPage; diff --git a/package.json b/package.json index c6e9a7b..f05e3e3 100644 --- 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", diff --git a/yarn.lock b/yarn.lock index f22d5d1..4c0db75 100644 --- 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"