Merge pull request #139 from x19216888-stack/main

Fix: Complete empty state and CSS error fixes for SubTrackr

Author: Smartdevs17

src/components/common/EmptyState.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { colors, spacing, typography, borderRadius } from '../utils/constants';
+
+interface EmptyStateProps {
+  icon: string;
+  title: string;
+  message: string;
+  actionText?: string;
+  onAction?: () => void;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon,
+  title,
+  message,
+  actionText,
+  onAction,
+}) => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.icon}>{icon}</Text>
+      <Text style={styles.title}>{title}</Text>
+      <Text style={styles.message}>{message}</Text>
+      {actionText && onAction && (
+        <TouchableOpacity style={styles.button} onPress={onAction}>
+          <Text style={styles.buttonText}>{actionText}</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing.xl * 2,
+    paddingHorizontal: spacing.lg,
+  },
+  icon: {
+    fontSize: 56,
+    marginBottom: spacing.md,
+  },
+  title: {
+    ...typography.h3,
+    color: colors.text,
+    marginBottom: spacing.sm,
+    textAlign: 'center',
+    fontWeight: '600',
+  },
+  message: {
+    ...typography.body,
+    color: colors.textSecondary,
+    textAlign: 'center',
+    lineHeight: 24,
+    marginBottom: spacing.lg,
+  },
+  button: {
+    backgroundColor: colors.primary,
+    paddingVertical: spacing.md,
+    paddingHorizontal: spacing.lg,
+    borderRadius: borderRadius.md,
+    marginTop: spacing.md,
+  },
+  buttonText: {
+    ...typography.body,
+    color: colors.text,
+    fontWeight: '600',
+    fontSize: 16,
+  },
+});