52 lines
1.0 KiB
TypeScript
52 lines
1.0 KiB
TypeScript
import React from "react";
|
|
import { View, Text, StyleSheet } from "react-native";
|
|
|
|
interface MetricCardProps {
|
|
heading: string;
|
|
value: number | null;
|
|
unit: string;
|
|
}
|
|
|
|
const MetricCard: React.FC<MetricCardProps> = ({ heading, value, unit }) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.textContainer}>
|
|
<Text style={styles.heading}>{heading}</Text>
|
|
<Text style={styles.value}>
|
|
{value?.toFixed(2) ?? "---"} {unit}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: 156,
|
|
height: 68,
|
|
backgroundColor: "#FCFCFC",
|
|
borderRadius: 8,
|
|
padding: 12,
|
|
justifyContent: "center",
|
|
},
|
|
textContainer: {
|
|
flexDirection: "column",
|
|
justifyContent: "flex-start",
|
|
gap: 8,
|
|
},
|
|
heading: {
|
|
fontSize: 12,
|
|
lineHeight: 16,
|
|
color: "#565F70",
|
|
fontFamily: "Inter-Medium",
|
|
},
|
|
value: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
color: "#252A34",
|
|
fontFamily: "Inter-SemiBold",
|
|
},
|
|
});
|
|
|
|
export default MetricCard;
|