soconnor
14c880123c
Expo app with dashboard, time clock, invoices, and settings — native tabs, glass UI, theme-aware components, and iOS Live Activities. Co-authored-by: Cursor <cursoragent@cursor.com>
47 lines
1.1 KiB
TypeScript
47 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: {
|
|
flex: 1,
|
|
minWidth: "46%",
|
|
},
|
|
label: {
|
|
fontSize: 13,
|
|
fontFamily: fonts.bodyMedium,
|
|
},
|
|
value: {
|
|
fontSize: 22,
|
|
fontFamily: fonts.heading,
|
|
},
|
|
hint: {
|
|
fontSize: 12,
|
|
fontFamily: fonts.body,
|
|
marginTop: 2,
|
|
},
|
|
});
|