everything refactored

components/stats/CategoryProgressBarList.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { View, Text, Button, StyleSheet, TouchableOpacity } from 'react-native';
+import CategoryProgressBar from './CategoryProgressBar';
+import { useTheme } from '../../app/contexts/ThemeContext';
+
+interface CategoryItem {
+    name: string;
+    color: string;
+    maxValue: number;
+    currentValue: number;
+}
+
+interface CategoryProgressBarListProps {
+    categories: CategoryItem[];
+}
+
+const MAX_VISIBLE_BARS = 4;
+
+const CategoryProgressBarList: React.FC<CategoryProgressBarListProps> = ({ categories }) => {
+    const [visibleBars, setVisibleBars] = useState(MAX_VISIBLE_BARS);
+
+    const showMore = () => {
+        setVisibleBars(prevVisibleBars => prevVisibleBars + MAX_VISIBLE_BARS);
+    };
+
+    return (
+        <View>
+            {categories.slice(0, visibleBars).map((category, index) => (
+                <CategoryProgressBar
+                    key={index}
+                    categoryName={category.name}
+                    color={category.color}
+                    maxValue={category.maxValue}
+                    currentValue={category.currentValue}
+                />
+            ))}
+            {visibleBars < categories.length && (
+                <TouchableOpacity style={styles.showMoreButton} onPress={showMore}>
+                    <Text style={styles.buttonText}>Show More</Text>
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    showMoreButton: {
+        backgroundColor: '#EF6C00',
+        padding: 10,
+        borderRadius: 5,
+        margin: 10,
+        alignItems: 'center',
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+});
+
+export default CategoryProgressBarList;