auto-commit for f631c712-171e-4e16-959f-7542d6a878c5

2026-06-12 03:01:12 +00:00 · 2025-11-08 21:33:02 +00:00
parent 4ce52edbc0
commit ae34aa7b50
1 changed files with 214 additions and 0 deletions
@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function NotificationsScreen({ navigation }: any) {
+  const insets = useSafeAreaInsets();
+
+  const notifications = [
+    {
+      id: '1',
+      title: 'New Governance Proposal',
+      message: 'Proposal #42: Increase monthly PEZ rewards by 10%',
+      time: '2 hours ago',
+      type: 'governance',
+      read: false,
+    },
+    {
+      id: '2',
+      title: 'Transaction Confirmed',
+      message: 'You received 100 HEZ from 5GrwvaEF5...',
+      time: '5 hours ago',
+      type: 'transaction',
+      read: false,
+    },
+    {
+      id: '3',
+      title: 'Staking Reward',
+      message: 'You earned 5.2 PEZ staking rewards',
+      time: '1 day ago',
+      type: 'reward',
+      read: true,
+    },
+  ];
+
+  const getIconName = (type: string) => {
+    switch (type) {
+      case 'governance':
+        return 'megaphone';
+      case 'transaction':
+        return 'swap-horizontal';
+      case 'reward':
+        return 'gift';
+      default:
+        return 'notifications';
+    }
+  };
+
+  const getIconColor = (type: string) => {
+    switch (type) {
+      case 'governance':
+        return '#EE2A35';
+      case 'transaction':
+        return '#3B82F6';
+      case 'reward':
+        return '#10B981';
+      default:
+        return '#6B7280';
+    }
+  };
+
+  return (
+    <View style={[styles.container, { paddingTop: insets.top }]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backButton}>
+          <Ionicons name="arrow-back" size={24} color="#1F2937" />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle}>Notifications</Text>
+        <TouchableOpacity style={styles.markAllButton}>
+          <Text style={styles.markAllText}>Mark all read</Text>
+        </TouchableOpacity>
+      </View>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        {notifications.map((notification) => (
+          <TouchableOpacity
+            key={notification.id}
+            style={[
+              styles.notificationCard,
+              !notification.read && styles.notificationCardUnread,
+            ]}
+          >
+            <View
+              style={[
+                styles.iconContainer,
+                { backgroundColor: `${getIconColor(notification.type)}20` },
+              ]}
+            >
+              <Ionicons
+                name={getIconName(notification.type) as any}
+                size={24}
+                color={getIconColor(notification.type)}
+              />
+            </View>
+
+            <View style={styles.notificationContent}>
+              <View style={styles.notificationHeader}>
+                <Text style={styles.notificationTitle}>{notification.title}</Text>
+                {!notification.read && <View style={styles.unreadDot} />}
+              </View>
+              <Text style={styles.notificationMessage}>{notification.message}</Text>
+              <Text style={styles.notificationTime}>{notification.time}</Text>
+            </View>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F8F9FA',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    backgroundColor: '#FFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+  },
+  backButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1F2937',
+  },
+  markAllButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: '#F3F4F6',
+  },
+  markAllText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6B7280',
+  },
+  scrollContent: {
+    padding: 16,
+  },
+  notificationCard: {
+    flexDirection: 'row',
+    backgroundColor: '#FFF',
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  notificationCardUnread: {
+    borderLeftWidth: 3,
+    borderLeftColor: '#EE2A35',
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  notificationContent: {
+    flex: 1,
+  },
+  notificationHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  notificationTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1F2937',
+    flex: 1,
+  },
+  unreadDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: '#EE2A35',
+  },
+  notificationMessage: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 4,
+  },
+  notificationTime: {
+    fontSize: 12,
+    color: '#9CA3AF',
+  },
+});