118 lines
3.3 KiB
TypeScript
118 lines
3.3 KiB
TypeScript
import React from 'react';
|
|
import { Tabs, Slot, useRouter } from 'expo-router';
|
|
import { Anchor, Button, useTheme, XStack, YStack } from 'tamagui';
|
|
import { PersonStanding, MessageCircle, LogOut, ArrowLeft, ArrowLeftFromLine } from '@tamagui/lucide-icons';
|
|
import { useAuth } from '../../contexts/authcontext'; // Adjust path as needed
|
|
|
|
export default function TabLayout() {
|
|
const theme = useTheme();
|
|
const { logout, isLoggedIn } = useAuth();
|
|
const redirect = true
|
|
const router = useRouter()
|
|
|
|
const goback = () => {
|
|
router.replace("/")
|
|
}
|
|
|
|
const navigateToLogin = () => {
|
|
router.replace("/login")
|
|
}
|
|
|
|
const navigateToSignup = () => {
|
|
router.replace("/signup")
|
|
}
|
|
const handleLogout = () => {
|
|
logout();
|
|
};
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarActiveTintColor: theme.red10.val,
|
|
tabBarStyle: {
|
|
backgroundColor: theme.background.val,
|
|
borderTopColor: theme.borderColor.val,
|
|
},
|
|
headerStyle: {
|
|
backgroundColor: theme.background.val,
|
|
borderBottomColor: theme.borderColor.val,
|
|
},
|
|
headerTintColor: theme.color.val,
|
|
}}
|
|
>
|
|
{/* Home Tab */}
|
|
<Tabs.Screen
|
|
name="login"
|
|
options={{
|
|
title: "Login",
|
|
headerShown: true,
|
|
headerLeft: () => <XStack><Button icon={ArrowLeftFromLine} onPress={goback}></Button></XStack>,
|
|
tabBarIcon: ({ color }) => <PersonStanding color={color} />,
|
|
headerRight: () => (
|
|
!isLoggedIn ? (
|
|
<XStack gap="$3">
|
|
|
|
<Button onPress={navigateToLogin}>Login</Button>
|
|
|
|
|
|
<Button onPress={navigateToSignup}>Sign-Up</Button>
|
|
|
|
</XStack>
|
|
|
|
|
|
):(<Button onPress={handleLogout}>Logout</Button>)
|
|
|
|
//<Button onPress={handleLogout} mr="$4" bg="$purple8" color="$purple12">
|
|
// Logout
|
|
//</Button>
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="signup"
|
|
options= {{
|
|
title:"signup",
|
|
headerShown:true,
|
|
headerLeft: () => <XStack><Button icon={ArrowLeftFromLine} onPress={goback}></Button></XStack>,
|
|
tabBarIcon: ({ color }) => <PersonStanding color={color} />,
|
|
headerRight: () => (
|
|
!isLoggedIn ? (
|
|
<XStack gap="$3">
|
|
<Button onPress={navigateToLogin}>Login</Button>
|
|
<Button onPress={navigateToSignup}>Sign-Up</Button>
|
|
</XStack>
|
|
) : (<Button onPress={handleLogout}>Logout</Button>)
|
|
|
|
//<Button onPress={handleLogout} mr="$4" bg="$purple8" color="$purple12">
|
|
// Logout
|
|
//</Button>
|
|
),
|
|
|
|
}}>
|
|
|
|
</Tabs.Screen>
|
|
|
|
{/* Conditional Rendering for Messages Tab */}
|
|
{isLoggedIn ? (
|
|
<Tabs.Screen
|
|
name="messages"
|
|
options={{
|
|
title: 'Messages',
|
|
tabBarIcon: ({ color }) => <MessageCircle color={color} />,
|
|
}}
|
|
/>
|
|
) : (
|
|
<Tabs.Screen
|
|
name="messages"
|
|
redirect={true}
|
|
options={{
|
|
title: 'Messages',
|
|
tabBarIcon: ({ color }) => <MessageCircle color={color} />,
|
|
}}
|
|
/>
|
|
)}
|
|
</Tabs>
|
|
);
|
|
}
|