eletrotupi / tcc/ commit / ab63193

frontend: add subtle section header

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago ab63193481c4d9f2e6f4506310c89df74af00d38 Browse files
Parents 7d2b76a
Changed files
1
Additions
+32
Deletions
-4
frontend/components/ui/Sections.tsx modified+32 -4
frontend/components/ui/Sections.tsx
1 1 
import React from 'react';
2 2 
import {
3 3 
  View,
4 4 
  StyleSheet,
5 5 
  Pressable,
29 29 
  title: string;
30 30 
  subtitle?: string;
31 31 
  actionLabel?: string;
32 32 
  onActionPress?: () => void;
33 33 
  style?: ViewStyle;
34 + 
  variant?: 'default' | 'subtle';
34 35 
}
35 36
36 37 
// XXX: A Section must either have a label as a pill/informative thing
37 38 
// or it should be a link
38 39 
export const SectionHeader: React.FC<SectionHeaderProps> = ({
39 40 
  title,
40 41 
  subtitle,
41 42 
  info,
42 43 
  actionLabel,
43 44 
  onActionPress,
45 + 
  variant,
44 46 
  style,
45 47 
}) => {
46 48 
  const textColor = useThemeColor({}, 'text');
47 49 
  const tintColor = useThemeColor({}, 'tint');
48 50 
  const textSecondaryColor = useThemeColor({}, 'textSecondary')
49 51
52 + 
  const getTextColor = () => {
53 + 
    switch (variant) {
54 + 
      case 'subtle':
55 + 
        return textSecondaryColor;
56 + 
      default:
57 + 
        return textColor;
58 + 
    }
59 + 
  };
60 +
61 + 
  const getFont = () => {
62 + 
    switch (variant) {
63 + 
      case 'subtle':
64 + 
        return {
65 + 
          fontSize: 11,
66 + 
          fontWeight: '600',
67 + 
          letterSpacing: 0.8,
68 + 
          color: Colors.light.textSecondary,
69 + 
          textTransform: 'uppercase',
70 + 
        };
71 + 
      default:
72 + 
        return {
73 + 
          fontSize: Typography.headlineMd.fontSize,
74 + 
          fontWeight: Typography.headlineMd.fontWeight,
75 + 
        };
76 + 
    }
77 + 
  }
78 +
50 79 
  const styles = StyleSheet.create({
51 80 
    headerContainer: {
52 - 
      marginBottom: (Spacing.cardGap * 2),
81 + 
      marginBottom: variant == 'subtle' ? 10 : (Spacing.cardGap * 2),
53 82 
    },
54 83 
    title: {
55 - 
      fontSize: Typography.headlineMd.fontSize,
56 - 
      fontWeight: Typography.headlineMd.fontWeight,
57 - 
      color: textColor,
84 + 
      color: getTextColor(),
85 + 
      ...getFont(),
58 86 
    },
59 87 
    subtitle: {
60 88 
      fontSize: 14,
61 89 
      color: textSecondaryColor,
62 90 
      lineHeight: 20,
108 136 
      )}
109 137 
    </View>
110 138 
  );
111 139 
};
112 140