soconnor
d057ba208d
git-subtree-dir: apps/mobile git-subtree-mainline:86f8987dffgit-subtree-split:5fa30f365f
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { StyleSheet, Text } from "react-native";
|
|
|
|
import { Card } from "@/components/ui/Card";
|
|
import { useAppTheme } from "@/contexts/ThemeContext";
|
|
import { fonts, spacing } from "@/constants/theme";
|
|
|
|
type StatCardProps = {
|
|
label: string;
|
|
value: string;
|
|
hint?: string;
|
|
};
|
|
|
|
/** Web `StatsCard` — glass card, border-0, shadow-md, p-6 */
|
|
export function StatCard({ label, value, hint }: StatCardProps) {
|
|
const { colors } = useAppTheme();
|
|
|
|
return (
|
|
<Card variant="stat" style={styles.card}>
|
|
<Text style={[styles.label, { color: colors.mutedForeground }]}>{label}</Text>
|
|
<Text style={[styles.value, { color: colors.foreground }]}>{value}</Text>
|
|
{hint ? (
|
|
<Text style={[styles.hint, { color: colors.mutedForeground }]}>{hint}</Text>
|
|
) : null}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
width: "100%",
|
|
},
|
|
label: {
|
|
fontSize: 13,
|
|
fontFamily: fonts.bodyMedium,
|
|
},
|
|
value: {
|
|
fontSize: 22,
|
|
fontFamily: fonts.heading,
|
|
},
|
|
hint: {
|
|
fontSize: 12,
|
|
fontFamily: fonts.body,
|
|
marginTop: 2,
|
|
},
|
|
});
|