Push all design and src app changes

2025-10-07 00:28:01 +05:30
parent 982dfda13e
commit 50972239b3
35 changed files with 6605 additions and 205 deletions
--- a/src/components/QuickActionCard.tsx
+++ b/src/components/QuickActionCard.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { colors, typography, spacing, borderRadius, shadows, iconSizes } from '../theme';
+
+interface QuickActionCardProps {
+  icon: string;
+  label: string;
+  description: string;
+  onPress: () => void;
+  badge?: string | number;
+  color?: string;
+}
+
+export const QuickActionCard: React.FC<QuickActionCardProps> = ({
+  icon,
+  label,
+  description,
+  onPress,
+  badge,
+  color = colors.highlight,
+}) => {
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <View style={styles.content}>
+        <View style={[styles.iconContainer, { backgroundColor: `${color}22` }]}>
+          <MaterialCommunityIcons name={icon} size={iconSizes.xl} color={color} />
+          {badge !== undefined && (
+            <View style={styles.badge}>
+              <Text style={styles.badgeText}>{badge}</Text>
+            </View>
+          )}
+        </View>
+        
+        <View style={styles.textContainer}>
+          <Text style={styles.label}>{label}</Text>
+          <Text style={styles.description}>{description}</Text>
+        </View>
+      </View>
+      
+      <MaterialCommunityIcons 
+        name="chevron-right" 
+        size={iconSizes.md} 
+        color={colors.highlight} 
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: spacing.lg,
+    borderRadius: borderRadius.lg,
+    backgroundColor: colors.surfaceAlt,
+    borderWidth: 2,
+    borderColor: colors.border,
+    ...shadows.md,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+  },
+  iconContainer: {
+    width: 56,
+    height: 56,
+    borderRadius: borderRadius.lg,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1.5,
+    borderColor: colors.border,
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: '#EF4444',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 6,
+    borderWidth: 2,
+    borderColor: colors.surfaceAlt,
+  },
+  badgeText: {
+    ...typography.caption,
+    fontSize: 11,
+    color: '#FFFFFF',
+    fontWeight: '800',
+  },
+  textContainer: {
+    flex: 1,
+    gap: 4,
+  },
+  label: {
+    ...typography.h4,
+    color: colors.highlightAlt,
+  },
+  description: {
+    ...typography.caption,
+    color: colors.textSecondary,
+  },
+});