eletrotupi / tcc/ frontend/components/misc/themed-text.tsx6a3fa1a67fda0d405e12bd12123985b1301b7b5a
1.3 KB | 60 lines Raw
1
import { StyleSheet, Text, type TextProps } from 'react-native';
2
3
import { useThemeColor } from '@/hooks/use-theme-color';
4
5
export type ThemedTextProps = TextProps & {
6
  lightColor?: string;
7
  darkColor?: string;
8
  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
9
};
10
11
export function ThemedText({
12
  style,
13
  lightColor,
14
  darkColor,
15
  type = 'default',
16
  ...rest
17
}: ThemedTextProps) {
18
  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
19
20
  return (
21
    <Text
22
      style={[
23
        { color },
24
        type === 'default' ? styles.default : undefined,
25
        type === 'title' ? styles.title : undefined,
26
        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
27
        type === 'subtitle' ? styles.subtitle : undefined,
28
        type === 'link' ? styles.link : undefined,
29
        style,
30
      ]}
31
      {...rest}
32
    />
33
  );
34
}
35
36
const styles = StyleSheet.create({
37
  default: {
38
    fontSize: 16,
39
    lineHeight: 24,
40
  },
41
  defaultSemiBold: {
42
    fontSize: 16,
43
    lineHeight: 24,
44
    fontWeight: '600',
45
  },
46
  title: {
47
    fontSize: 32,
48
    fontWeight: 'bold',
49
    lineHeight: 32,
50
  },
51
  subtitle: {
52
    fontSize: 20,
53
    fontWeight: 'bold',
54
  },
55
  link: {
56
    lineHeight: 30,
57
    fontSize: 16,
58
    color: '#0a7ea4',
59
  },
60
});