118 lines
3.5 KiB
TypeScript
118 lines
3.5 KiB
TypeScript
import { Tabs } from 'expo-router'
|
|
import { View, Text, StyleSheet } from 'react-native'
|
|
import { COLORS } from '../../constants/Config'
|
|
|
|
function TabIcon({ icon, label, focused }: { icon: string; label: string; focused: boolean }) {
|
|
return (
|
|
<View style={[tab.wrap, focused && tab.active]}>
|
|
<Text style={tab.icon}>{icon}</Text>
|
|
<Text style={[tab.label, focused && tab.labelActive]}>{label}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const tab = StyleSheet.create({
|
|
wrap: { alignItems: 'center', paddingTop: 4, paddingHorizontal: 2 },
|
|
active: {},
|
|
icon: { fontSize: 21 },
|
|
label: { fontSize: 10, color: COLORS.muted, marginTop: 2, letterSpacing: 0.2 },
|
|
labelActive: { color: COLORS.accent, fontWeight: '700' },
|
|
})
|
|
|
|
export default function TabLayout() {
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerStyle: { backgroundColor: COLORS.gnbBg },
|
|
headerTintColor: '#fff',
|
|
headerTitleStyle: { fontWeight: '800', fontSize: 16, letterSpacing: -0.3 },
|
|
tabBarStyle: {
|
|
backgroundColor: '#fff',
|
|
borderTopColor: COLORS.border,
|
|
borderTopWidth: 1,
|
|
height: 62,
|
|
elevation: 8,
|
|
shadowColor: '#003366',
|
|
shadowOffset: { width: 0, height: -2 },
|
|
shadowOpacity: 0.08,
|
|
shadowRadius: 8,
|
|
},
|
|
tabBarActiveTintColor: COLORS.accent,
|
|
tabBarInactiveTintColor: COLORS.muted,
|
|
tabBarShowLabel: false,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: '대시보드',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="📊" label="대시보드" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="sr"
|
|
options={{
|
|
title: '서비스 요청',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="📋" label="SR" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="chat"
|
|
options={{
|
|
title: 'AI 챗봇',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🤖" label="AI" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="notifications"
|
|
options={{
|
|
title: '알림',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🔔" label="알림" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="dr"
|
|
options={{
|
|
title: 'DR 관제',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🛡️" label="DR" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="network"
|
|
options={{
|
|
title: '네트워크',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🔀" label="네트워크" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="insights"
|
|
options={{
|
|
title: 'AI 인사이트',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🧠" label="AI" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="voice"
|
|
options={{
|
|
title: '음성 명령',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="🎤" label="음성" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="scan"
|
|
options={{
|
|
title: 'QR 스캔',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="📷" label="QR" focused={focused} />,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="settings"
|
|
options={{
|
|
title: '설정',
|
|
tabBarIcon: ({ focused }) => <TabIcon icon="⚙️" label="설정" focused={focused} />,
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
)
|
|
}
|