68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import { SPACING } from "@/src/constants/Theme";
|
|
import { useTheme } from "@/src/hooks/useTheme";
|
|
import { BookOpen, CheckCircle2, TrendingUp } from "lucide-react-native";
|
|
import React, { useMemo } from "react";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
|
|
interface LibraryStatsProps {
|
|
stats: {
|
|
reading: number;
|
|
finished: number;
|
|
pages: number;
|
|
};
|
|
}
|
|
|
|
export default function LibraryStats({ stats }: LibraryStatsProps) {
|
|
const { colors, isDark } = useTheme();
|
|
const styles = useMemo(() => createStyles(colors, isDark), [colors, isDark]);
|
|
|
|
return (
|
|
<View style={styles.statsSection}>
|
|
<View style={styles.statCard}>
|
|
<TrendingUp size={18} color={colors.primary} />
|
|
<Text style={styles.statValue}>{stats.pages}</Text>
|
|
<Text style={styles.statLabel}>PAGES READ</Text>
|
|
</View>
|
|
<View style={styles.statCard}>
|
|
<BookOpen size={18} color={colors.secondary} />
|
|
<Text style={styles.statValue}>{stats.reading}</Text>
|
|
<Text style={styles.statLabel}>ACTIVE</Text>
|
|
</View>
|
|
<View style={styles.statCard}>
|
|
<CheckCircle2 size={18} color={colors.tertiary} />
|
|
<Text style={styles.statValue}>{stats.finished}</Text>
|
|
<Text style={styles.statLabel}>FINISHED</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const createStyles = (colors: any, isDark: boolean) =>
|
|
StyleSheet.create({
|
|
statsSection: {
|
|
flexDirection: "row",
|
|
gap: SPACING.md,
|
|
marginVertical: SPACING.lg,
|
|
paddingHorizontal: SPACING.lg,
|
|
},
|
|
statCard: {
|
|
flex: 1,
|
|
backgroundColor: colors.surfaceVariant,
|
|
borderRadius: 12,
|
|
padding: SPACING.md,
|
|
alignItems: "center",
|
|
gap: SPACING.sm,
|
|
},
|
|
statValue: {
|
|
fontSize: 18,
|
|
fontWeight: "700",
|
|
color: colors.onSurface,
|
|
},
|
|
statLabel: {
|
|
fontSize: 9,
|
|
fontWeight: "600",
|
|
color: colors.outline,
|
|
letterSpacing: 0.5,
|
|
},
|
|
});
|