remake

Signed-off-by: Lucas Faria Mendes <lucas.fariamo08@gmail.com>

1 files changed, 104 insertions, 0 deletions

diff --git a/src/components/ui/primitives.tsx b/src/components/ui/primitives.tsx
new file mode 100644
index 0000000..d598bd2
--- /dev/null
+++ b/src/components/ui/primitives.tsx
@@ -0,0 +1,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,
+    },
+});