61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { useUser } from '@clerk/clerk-react'
|
|
import Ionicons from '@expo/vector-icons/Ionicons'
|
|
import { Tabs } from 'expo-router'
|
|
import React from 'react'
|
|
|
|
export default function TabLayout() {
|
|
const { user } = useUser()
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: '#ffd33d',
|
|
headerStyle: {
|
|
backgroundColor: '#25292e'
|
|
},
|
|
headerShadowVisible: false,
|
|
headerTintColor: '#fff',
|
|
tabBarStyle: {
|
|
backgroundColor: '#25292e'
|
|
}
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name='home'
|
|
options={{
|
|
title: 'Home',
|
|
headerShown: false,
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
|
|
)
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name='posts'
|
|
options={{
|
|
title: 'Posts',
|
|
headerShown: false,
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<Ionicons name={focused ? 'rocket-sharp' : 'rocket-outline'} size={24} color={color} />
|
|
),
|
|
tabBarItemStyle: { display: user?.publicMetadata.role === 'admin' ? 'flex' : 'none' }
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name='profile'
|
|
options={{
|
|
title: 'Profile',
|
|
headerShown: false,
|
|
tabBarIcon: ({ color, focused }) => (
|
|
<Ionicons
|
|
name={focused ? 'person-circle-sharp' : 'person-circle-outline'}
|
|
size={24}
|
|
color={color}
|
|
/>
|
|
)
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
)
|
|
}
|