85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
import { Tabs, Redirect } from 'expo-router';
|
|
import { MaterialIcons } from '@expo/vector-icons';
|
|
import { StyleSheet } from 'react-native';
|
|
import { COLORS } from '../../src/constants';
|
|
import { useHouseholdStore } from '../../src/hooks/useHousehold';
|
|
|
|
export default function TabLayout() {
|
|
const household = useHouseholdStore((s) => s.household);
|
|
const isInitialized = useHouseholdStore((s) => s.isInitialized);
|
|
const shoppingList = useHouseholdStore((s) => s.shoppingList);
|
|
const unChecked = shoppingList.filter((e) => !e.isChecked).length;
|
|
|
|
if (isInitialized && !household) {
|
|
return <Redirect href="/onboarding" />;
|
|
}
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
tabBarActiveTintColor: COLORS.primary,
|
|
tabBarInactiveTintColor: COLORS.textSecondary,
|
|
tabBarStyle: styles.tabBar,
|
|
tabBarLabelStyle: styles.tabLabel,
|
|
headerStyle: styles.header,
|
|
headerTitleStyle: styles.headerTitle,
|
|
headerShadowVisible: false,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="index"
|
|
options={{
|
|
title: 'Inventar',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="kitchen" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="shopping"
|
|
options={{
|
|
title: 'Einkauf',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="shopping-cart" size={size} color={color} />
|
|
),
|
|
tabBarBadge: unChecked > 0 ? unChecked : undefined,
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="settings"
|
|
options={{
|
|
title: 'Einstellungen',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<MaterialIcons name="settings" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
tabBar: {
|
|
backgroundColor: COLORS.white,
|
|
borderTopColor: COLORS.border,
|
|
borderTopWidth: StyleSheet.hairlineWidth,
|
|
elevation: 0,
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 12,
|
|
shadowOffset: { width: 0, height: -2 },
|
|
},
|
|
tabLabel: {
|
|
fontSize: 11,
|
|
fontWeight: '600',
|
|
},
|
|
header: {
|
|
backgroundColor: COLORS.white,
|
|
},
|
|
headerTitle: {
|
|
fontWeight: '700',
|
|
fontSize: 17,
|
|
color: COLORS.text,
|
|
},
|
|
});
|