frontend: add subtle cards
Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago
02738dc767b5fa1fcc762df09ddeb58942eff4b3 Browse filesParents
ab63193Changed files
1
Additions
+42
Deletions
0
frontend/components/ui/Cards.tsx
1 1
import React from 'react';
2 2
import {
3 3
View,
4 4
StyleSheet,
5 5
Pressable,
6 6
ViewStyle,
7 +
Text
7 8
} from 'react-native';
8 9
9 10
import { Colors, Typography, Spacing, BorderRadius, Shadows } from '@/constants/theme';
10 11
import { useThemeColor } from '@/hooks/use-theme-color';
11 12
import { ThemedText } from '@/components/misc/themed-text'
13 +
import { Ionicons } from '@expo/vector-icons';
12 14
13 15
interface CardProps {
14 16
children: React.ReactNode;
15 17
onPress?: () => void;
16 18
variant?: 'default' | 'highlighted';
59 61
>
60 62
{children}
61 63
</Pressable>
62 64
);
63 65
};
66 +
67 +
interface SubtleInfoCardProps {
68 +
text: string;
69 +
style?: ViewStyle;
70 +
};
71 +
72 +
export const SubtleInfoCard: React.FC<SubtleInfoCardProps> = ({
73 +
text,
74 +
style
75 +
}) => {
76 +
const accentBlueColor = useThemeColor({}, 'accentBlue');
77 +
78 +
const styles = StyleSheet.create({
79 +
card: {
80 +
backgroundColor: accentBlueColor,
81 +
borderRadius: BorderRadius.lg,
82 +
padding: Spacing.cardGap,
83 +
marginBottom: Spacing.cardGap,
84 +
flex: 1,
85 +
flexDirection: 'row',
86 +
alignItems: 'top'
87 +
},
88 +
text: {
89 +
fontSize: 12,
90 +
lineHeight: 18,
91 +
color: Colors.light.textSecondary,
92 +
marginLeft: 10
93 +
},
94 +
});
95 +
96 +
return (
97 +
<View style={[styles.card, style]}>
98 +
<Ionicons name="information-circle-outline" size={20} color="gray" />
99 +
100 +
<Text style={styles.text}>
101 +
{text.replace(/\s+/g, ' ').trim()}
102 +
</Text>
103 +
</View>
104 +
)
105 +
}