UI Updates and Bug Fixes

2026-08-14 17:42:18 +05:30
parent 29e97a7316
commit 6dac115811
57 changed files with 16680 additions and 543 deletions
@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { ChevronLeft } from 'lucide-react-native';
+import { Typography } from './Typography';
+import { useResponsiveLayout } from '../../hooks/useResponsiveLayout';
+import { THEME } from '../../constants/theme';
+
+interface HeaderProps {
+  title: string;
+  showBack?: boolean;
+  rightComponent?: React.ReactNode;
+}
+
+export const Header: React.FC<HeaderProps> = ({ title, showBack = false, rightComponent }) => {
+  const navigation = useNavigation();
+  const { screenPadding } = useResponsiveLayout();
+
+  return (
+    <View style={[styles.header, { paddingHorizontal: screenPadding }]}>
+      <View style={styles.leftContainer}>
+        {showBack && (
+          <TouchableOpacity 
+            onPress={() => navigation.goBack()} 
+            style={styles.backButton}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <ChevronLeft color="#FFF" size={26} strokeWidth={2.5} />
+          </TouchableOpacity>
+        )}
+        <Typography variant="h3" weight="bold" style={styles.title}>
+          {title}
+        </Typography>
+      </View>
+      {rightComponent && (
+        <View style={styles.rightContainer}>
+          {rightComponent}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    backgroundColor: THEME.colors.primary, // Primary brand color
+  },
+  leftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rightContainer: {
+    justifyContent: 'center',
+  },
+  backButton: {
+    marginRight: 12,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    color: '#FFFFFF',
+  }
+});