fitst commit

components/ui/Header.tsx

@@ -0,0 +1,92 @@
+import Logo from '@/assets/images/logo.png';
+import { useTheme } from '@/components/ThemeContext';
+import { LogOut } from 'lucide-react-native';
+import { useTranslation } from 'react-i18next';
+import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useAuth } from '../AuthProvider';
+
+export const CustomHeader = ({ logoutbtn = false }: { logoutbtn?: boolean }) => {
+  const { isDark } = useTheme();
+  const { t } = useTranslation();
+  const { logout } = useAuth();
+
+  return (
+    <View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
+      <View style={styles.logoWrapper}>
+        <View style={styles.logoContainer}>
+          <Image source={Logo} style={styles.logo} />
+        </View>
+        <Text style={[styles.title, isDark ? styles.darkText : styles.lightText]}>
+          {t('app.name', 'InfoTarget')}
+        </Text>
+      </View>
+      {logoutbtn && (
+        <TouchableOpacity onPress={logout}>
+          <LogOut color={'red'} />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+
+  darkBg: {
+    backgroundColor: '#0f172a',
+    borderBottomColor: '#1e293b',
+  },
+
+  lightBg: {
+    backgroundColor: '#ffffff',
+    borderBottomColor: '#e2e8f0',
+  },
+
+  logoWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+
+  logoContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
+    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 4,
+  },
+
+  logo: {
+    width: 32,
+    height: 32,
+    resizeMode: 'contain',
+  },
+
+  title: {
+    fontSize: 20,
+    fontWeight: '700',
+    letterSpacing: 0.3,
+  },
+
+  darkText: {
+    color: '#f8fafc',
+  },
+
+  lightText: {
+    color: '#0f172a',
+  },
+});