1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Colors, Radius, Shadow, Spacing, Typography } from '@/constants/theme';
interface CardProps {
children: React.ReactNode;
style?: object;
}
export function Card({ children, style }: CardProps) {
return <View style={[styles.card, style]}>{children}</View>;
}
interface LabelProps {
text: string;
color?: string;
}
export function SectionLabel({ text, color = Colors.textSecondary }: LabelProps) {
return <Text style={[styles.label, { color }]}>{text}</Text>;
}
interface CurrencyDisplayProps {
amount: number;
size?: 'display' | 'large' | 'normal';
showSign?: boolean;
}
export function CurrencyDisplay({
amount,
size = 'normal',
showSign = false,
}: CurrencyDisplayProps) {
const isNegative = amount < 0;
const color = isNegative ? Colors.negative : Colors.positive;
const formatted = Math.abs(amount).toLocaleString('pt-BR', {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
const sign = showSign ? (isNegative ? '- ' : '+ ') : '';
const textStyle =
size === 'display'
? styles.displayAmount
: size === 'large'
? styles.largeAmount
: styles.normalAmount;
return (
<View style={styles.currencyRow}>
<Text style={[styles.currencyPrefix, { color }]}>
{sign}R${' '}
</Text>
<Text style={[textStyle, { color }]}>{formatted}</Text>
</View>
);
}
interface DividerProps {
style?: object;
}
export function Divider({ style }: DividerProps) {
return <View style={[styles.divider, style]} />;
}
const styles = StyleSheet.create({
card: {
backgroundColor: Colors.surface,
borderRadius: Radius.lg,
padding: Spacing.lg,
borderWidth: 1,
borderColor: Colors.border,
...Shadow.card,
},
label: {
...Typography.caption,
textTransform: 'uppercase',
letterSpacing: 1.2,
},
currencyRow: {
flexDirection: 'row',
alignItems: 'flex-end',
},
currencyPrefix: {
...Typography.currencyLabel,
paddingBottom: 4,
},
displayAmount: {
...Typography.display,
},
largeAmount: {
...Typography.h1,
},
normalAmount: {
...Typography.bodyLarge,
fontFamily: 'DMSans_600SemiBold',
},
divider: {
height: 1,
backgroundColor: Colors.border,
marginVertical: Spacing.md,
},
});
|
