@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
33 lines (32 loc) • 1.06 kB
JavaScript
import React from 'react';
import { StyleSheet } from 'react-native';
import { Card } from '../../Card/Card';
import { Text } from '../../Text/Text';
import { useDeviceTheme } from '../../../theme/deviceTheme';
export const KPICard = ({ title, subtitle, value, trend, key, }) => {
const { colors } = useDeviceTheme();
return (<Card key={key} title={title} subtitle={subtitle} elevation={3} style={styles.card}>
<Text variant="h2" style={{ ...styles.value, color: colors.text.primary }}>{value}</Text>
<Text variant="body2" style={trend.isPositive ? { ...styles.positive, color: colors.success.main } : { ...styles.negative, color: colors.error.main }}>
{trend.isPositive ? '↑' : '↓'} {trend.value}
</Text>
</Card>);
};
const styles = StyleSheet.create({
card: {
flex: 1,
margin: 8,
padding: 16,
},
value: {
fontSize: 24,
fontWeight: 'bold',
marginVertical: 8,
},
positive: {
fontSize: 12,
},
negative: {
fontSize: 12,
},
});