frontend: add screen layout

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 51a7c2bc2232d2d4a32f2314cb9bd484478cb323

Parents: 7a3f55e

2 file(s) changed

frontend/components/ui/ScreenLayout.tsx +158 -0
frontend/components/ui/icon-symbol.tsx +1 -0

frontend/components/ui/ScreenLayout.tsx

@@ -0,0 +1,158 @@
  + import React from 'react';
  + 
  + import {
  +   View,
  +   ScrollView,
  +   StyleSheet,
  +   Image,
  +   Pressable,
  +   StatusBar,
  + } from 'react-native';
  + 
  + import { SafeAreaView } from 'react-native-safe-area-context';
  + import { IconSymbol } from '@/components/ui/icon-symbol';
  + import { useThemeColor } from '@/hooks/use-theme-color';
  + import { Typography, Spacing, BorderRadius } from '@/constants/theme'
  + import { ThemedText } from '@/components/misc/themed-text'
  + 
  + interface ScreenLayoutProps {
  +   children: React.ReactNode;
  +   userName?: string;
  +   userAvatar?: string;
  +   onNotificationPress?: () => void;
  +   showNotificationBadge?: boolean;
  +   scrollEnabled?: boolean;
  + }
  + 
  + export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
  +   children,
  +   userName = 'Usuário',
  +   userAvatar,
  +   onNotificationPress,
  +   showNotificationBadge = false,
  +   scrollEnabled = true,
  + }) => {
  +   const textColor = useThemeColor({}, 'text');
  +   const backgroundColor = useThemeColor({}, 'background');
  +   const surfaceColor = useThemeColor({}, 'surface');
  +   const dividerColor = useThemeColor({}, 'divider');
  +   const accentBlue = useThemeColor({}, 'accentBlue');
  +   const tintColor = useThemeColor({}, 'tint');
  + 
  +   const styles = StyleSheet.create({
  +     container: {
  +       flex: 1,
  +       backgroundColor: backgroundColor,
  +     },
  +     safeAreaView: {
  +       flex: 1,
  +       backgroundColor: backgroundColor,
  +     },
  +     header: {
  +       paddingHorizontal: Spacing.containerPadding,
  +       paddingVertical: 12,
  +       backgroundColor: surfaceColor,
  +       borderBottomWidth: 1,
  +       borderBottomColor: dividerColor,
  +       flexDirection: 'row',
  +       justifyContent: 'space-between',
  +       alignItems: 'center',
  +     },
  +     headerLeft: {
  +       flexDirection: 'row',
  +       alignItems: 'center',
  +       gap: Spacing.inlineGapSm,
  +     },
  +     avatar: {
  +       width: 40,
  +       height: 40,
  +       borderRadius: 20,
  +       backgroundColor: accentBlue,
  +     },
  +     userName: {
  +       fontSize: Typography.bodyLg.fontSize,
  +       fontWeight: '600',
  +       color: textColor,
  +     },
  +     notificationButton: {
  +       width: 40,
  +       height: 40,
  +       borderRadius: BorderRadius.md,
  +       justifyContent: 'center',
  +       alignItems: 'center',
  +       activeOpacity: 0.7,
  +     },
  +     notificationBadge: {
  +       position: 'absolute',
  +       top: 4,
  +       right: 4,
  +       width: 8,
  +       height: 8,
  +       borderRadius: 4,
  +       backgroundColor: tintColor,
  +     },
  +     scrollContent: {
  +       paddingHorizontal: Spacing.containerPadding,
  +       paddingVertical: Spacing.sectionGap,
  +     },
  +   });
  +  
  +   return (
  +     <View style={styles.container}>
  +       <StatusBar
  +         barStyle="dark-content"
  +         backgroundColor={surfaceColor}
  +       />
  +       <SafeAreaView style={styles.safeAreaView}>
  +         <View style={styles.header}>
  +           <View style={styles.headerLeft}>
  +             {userAvatar ? (
  +               <Image
  +                 source={{ uri: userAvatar }}
  +                 style={styles.avatar}
  +               />
  +             ) : (
  +               <View style={styles.avatar} />
  +             )}
  +             <View>
  +               <ThemedText style={styles.userName}>
  +                 Olá, {userName}
  +               </ThemedText>
  +             </View>
  +           </View>
  + 
  +           <Pressable
  +             style={styles.notificationButton}
  +             onPress={onNotificationPress}
  +             hitSlop={8}
  +           >
  +             <View
  +               style={{
  +                 fontSize: 24,
  +                 color: textColor,
  +               }}
  +             >
  +             <IconSymbol size={24} name="notifications" color={textColor} />
  +             </View>
  +             {showNotificationBadge && (
  +               <View style={styles.notificationBadge} />
  +             )}
  +           </Pressable>
  +         </View>
  + 
  +         <ScrollView
  +           scrollEnabled={scrollEnabled}
  +           showsVerticalScrollIndicator={false}
  +           contentContainerStyle={scrollEnabled ? undefined : { flex: 1 }}
  +           scrollEventThrottle={16}
  +         >
  +           <View style={styles.scrollContent}>
  +             {children}
  +           </View>
  +         </ScrollView>
  +       </SafeAreaView>
  +     </View>
  +   );
  + };
  + 
  + export default ScreenLayout;

frontend/components/ui/icon-symbol.tsx

@@ -18,6 +18,7 @@ * since we won't have iOS stuff
     */
    const MAPPING = {
      'house.fill': 'home',
  +   'notifications': 'notifications',
      'add-circle': 'add-circle',
      'history': 'history',
      'lightbulb-outline': 'lightbulb-outline',