Fix form keyboard issues and sticky footers in agent screens

2026-05-26 16:34:05 +05:30
commit 9ac5e95d52
410 changed files with 86650 additions and 0 deletions
@@ -0,0 +1,157 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import Ionicons from '@react-native-vector-icons/ionicons';
+import { Card } from '../../../components';
+import { useTheme } from '../../../theme';
+import { AwarenessArticle } from '../types';
+
+interface AwarenessCardProps {
+  article: AwarenessArticle;
+  isBookmarked: boolean;
+  onToggleBookmark: () => void;
+  onPress: () => void;
+}
+
+export const AwarenessCard = ({
+  article,
+  isBookmarked,
+  onToggleBookmark,
+  onPress,
+}: AwarenessCardProps) => {
+  const theme = useTheme();
+
+  return (
+    <Pressable onPress={onPress}>
+      <Card style={styles.card}>
+      <View style={styles.header}>
+        <View style={[styles.iconFrame, { backgroundColor: `${theme.colors.primary}12` }]}>
+          <Ionicons name={article.icon as any} size={22} color={theme.colors.primary} />
+        </View>
+        <View style={styles.headerInfo}>
+          <View style={styles.titleRow}>
+            <Text style={[styles.category, { color: theme.colors.primary }]}>
+              {article.category}
+            </Text>
+            {article.isUrgent && (
+              <View style={[styles.urgentBadge, { backgroundColor: `${theme.colors.error}15` }]}>
+                <Text style={[styles.urgentText, { color: theme.colors.error }]}>URGENT</Text>
+              </View>
+            )}
+          </View>
+          <Text style={[styles.title, { color: theme.colors.textPrimary }]} numberOfLines={1}>
+            {article.title}
+          </Text>
+        </View>
+        <Pressable hitSlop={10} onPress={onToggleBookmark} style={styles.bookmarkBtn}>
+          <Ionicons
+            name={isBookmarked ? 'bookmark' : 'bookmark-outline'}
+            size={22}
+            color={isBookmarked ? theme.colors.primary : theme.colors.textMuted}
+          />
+        </Pressable>
+      </View>
+
+      <Text style={[styles.description, { color: theme.colors.textSecondary }]} numberOfLines={2}>
+        {article.description}
+      </Text>
+
+      <View style={styles.footer}>
+        <View style={styles.tags}>
+          {article.tags.slice(0, 2).map((tag) => (
+            <View key={tag} style={[styles.tag, { backgroundColor: theme.colors.surfaceMuted }]}>
+              <Text style={[styles.tagText, { color: theme.colors.textSecondary }]}>#{tag}</Text>
+            </View>
+          ))}
+        </View>
+        <View style={styles.readMore}>
+          <Text style={[styles.readMoreText, { color: theme.colors.primary }]}>Read More</Text>
+          <Ionicons name="chevron-forward" size={14} color={theme.colors.primary} />
+        </View>
+      </View>
+    </Card>
+  </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 16,
+    marginBottom: 16,
+    gap: 12,
+  },
+  header: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'center',
+  },
+  iconFrame: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerInfo: {
+    flex: 1,
+    gap: 2,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  category: {
+    fontSize: 11,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+  urgentBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  urgentText: {
+    fontSize: 9,
+    fontWeight: '900',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  bookmarkBtn: {
+    padding: 4,
+  },
+  description: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 4,
+  },
+  tags: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  tag: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+  tagText: {
+    fontSize: 10,
+    fontWeight: '600',
+  },
+  readMore: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  readMoreText: {
+    fontSize: 13,
+    fontWeight: '700',
+  },
+});