Felipe
d7fb768d3b
- Introduced SpoolPreset and User domain models with necessary DTOs and utility functions. - Created AuthRepository, FilamentRepository, and SpoolPresetRepository interfaces for authentication and data management. - Implemented UI components for filament display, including ColorSwatch, FilamentCard, and StockBar. - Developed layout components such as Header and Screen for consistent app structure. - Added reusable UI components like Badge, Button, Card, and Input for better user interaction. - Established global constants and theme settings for consistent styling across the application. - Implemented utility functions for filament calculations and formatting. - Created Zustand stores for managing authentication, filament, and preset states. - Configured TypeScript settings for improved development experience.
110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { Tabs, Redirect } from 'expo-router';
|
|
import { View, TouchableOpacity, StyleSheet } from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useAuthStore } from '@store/authStore';
|
|
import { colors, radius, spacing } from '@shared/theme';
|
|
|
|
/**
|
|
* Layout do app autenticado com Bottom Tab Navigator.
|
|
* 4 abas + FAB central: Início | Estoque | [+] | Config | Perfil
|
|
*/
|
|
export default function AppLayout(): React.ReactElement {
|
|
const { isAuthenticated } = useAuthStore();
|
|
|
|
if (!isAuthenticated) {
|
|
return <Redirect href="/(auth)/login" />;
|
|
}
|
|
|
|
return (
|
|
<Tabs
|
|
screenOptions={{
|
|
headerShown: false,
|
|
tabBarStyle: styles.tabBar,
|
|
tabBarActiveTintColor: colors.accent,
|
|
tabBarInactiveTintColor: colors.textSecondary,
|
|
tabBarLabelStyle: styles.tabLabel,
|
|
}}
|
|
>
|
|
<Tabs.Screen
|
|
name="home"
|
|
options={{
|
|
title: 'Início',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="grid-outline" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="inventory"
|
|
options={{
|
|
title: 'Estoque',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="layers-outline" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="add"
|
|
options={{
|
|
title: '',
|
|
tabBarIcon: () => (
|
|
<View style={styles.fab}>
|
|
<Ionicons name="add" size={28} color={colors.bgBase} />
|
|
</View>
|
|
),
|
|
tabBarButton: (props) => (
|
|
<TouchableOpacity {...props} style={styles.fabWrapper} activeOpacity={0.8} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="config"
|
|
options={{
|
|
title: 'Config',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="settings-outline" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
<Tabs.Screen
|
|
name="profile"
|
|
options={{
|
|
title: 'Perfil',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Ionicons name="person-outline" size={size} color={color} />
|
|
),
|
|
}}
|
|
/>
|
|
</Tabs>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
tabBar: {
|
|
backgroundColor: colors.bgSurface,
|
|
borderTopColor: colors.border,
|
|
borderTopWidth: 1,
|
|
height: 72,
|
|
paddingBottom: spacing[2],
|
|
},
|
|
tabLabel: {
|
|
fontSize: 11,
|
|
fontFamily: 'Inter',
|
|
},
|
|
fabWrapper: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
top: -8,
|
|
},
|
|
fab: {
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: radius.full,
|
|
backgroundColor: colors.accent,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
});
|