frontend: add subtle cards

Pedro Lucas Porcellis porcellis@eletrotupi.com 1 month ago 02738dc767b5fa1fcc762df09ddeb58942eff4b3

Parents: ab63193

1 file(s) changed

frontend/components/ui/Cards.tsx +42 -0

frontend/components/ui/Cards.tsx

@@ -4,11 +4,13 @@ View,
      StyleSheet,
      Pressable,
      ViewStyle,
  +   Text
    } from 'react-native';
    
    import { Colors, Typography, Spacing, BorderRadius, Shadows } from '@/constants/theme';
    import { useThemeColor } from '@/hooks/use-theme-color';
    import { ThemedText } from '@/components/misc/themed-text'
  + import { Ionicons } from '@expo/vector-icons';
    
    interface CardProps {
      children: React.ReactNode;

@@ -61,3 +63,43 @@ {children}
        </Pressable>
      );
    };
  + 
  + interface SubtleInfoCardProps {
  +   text: string;
  +   style?: ViewStyle;
  + };
  + 
  + export const SubtleInfoCard: React.FC<SubtleInfoCardProps> = ({
  +   text,
  +   style
  + }) => {
  +   const accentBlueColor = useThemeColor({}, 'accentBlue');
  + 
  +   const styles = StyleSheet.create({
  +     card: {
  +       backgroundColor: accentBlueColor,
  +       borderRadius: BorderRadius.lg,
  +       padding: Spacing.cardGap,
  +       marginBottom: Spacing.cardGap,
  +       flex: 1,
  +       flexDirection: 'row',
  +       alignItems: 'top'
  +     },
  +     text: {
  +       fontSize: 12,
  +       lineHeight: 18,
  +       color: Colors.light.textSecondary,
  +       marginLeft: 10
  +     },
  +   });
  + 
  +   return (
  +     <View style={[styles.card, style]}>
  +       <Ionicons name="information-circle-outline" size={20} color="gray" />
  + 
  +       <Text style={styles.text}>
  +         {text.replace(/\s+/g, ' ').trim()}
  +       </Text>
  +     </View>
  +   )
  + }