Initial commit

2025-08-26 16:26:59 +05:00
commit fd95422447
318 changed files with 38301 additions and 0 deletions
--- a/src/screens/profile/notifications/ui/NotificationsModal.tsx
+++ b/src/screens/profile/notifications/ui/NotificationsModal.tsx
@@ -0,0 +1,186 @@
+import React, { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Animated,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import CloseIcon from 'svg/Close';
+import { NotificationsData } from '../lib/data';
+
+interface Props {
+  visible: boolean;
+  setVisible: (val: boolean) => void;
+  selectedOrder: NotificationsData | null;
+}
+
+const NotificationsModal = ({ visible, setVisible, selectedOrder }: Props) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(50)).current;
+  const { t } = useTranslation();
+  const closeModal = () => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start(() => setVisible(false));
+  };
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.spring(translateY, {
+          toValue: 0,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+  }, [visible]);
+
+  if (!visible || !selectedOrder) return null;
+
+  return (
+    <View style={styles.overlay}>
+      <Animated.View
+        style={[
+          styles.modalContent,
+          {
+            opacity: opacity,
+            transform: [{ translateY }],
+          },
+        ]}
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>{selectedOrder.title}</Text>
+          <TouchableOpacity onPress={closeModal} style={styles.closeBtn}>
+            <CloseIcon width={15} height={15} color={'#000'} />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.divider} />
+
+        <Text style={styles.sectionTitle}>{selectedOrder.message}</Text>
+        <TouchableOpacity onPress={closeModal} style={styles.btn}>
+          <Text style={styles.btnText}>{t('Yopish')}</Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 100,
+  },
+  modalContent: {
+    width: '90%',
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    paddingBottom: 20,
+    shadowColor: '#000',
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    elevation: 6,
+  },
+  header: {
+    padding: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  closeBtn: {
+    padding: 5,
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#0000000D',
+    borderRadius: 50,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: '#E0E0E0',
+    marginBottom: 10,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    paddingHorizontal: 20,
+    marginBottom: 8,
+  },
+  productItem: {
+    paddingHorizontal: 20,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    marginBottom: 10,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  productName: {
+    fontWeight: '500',
+    fontSize: 15,
+  },
+  productTrekId: {
+    color: '#555',
+  },
+  detail: {
+    color: '#555',
+    marginTop: 8,
+  },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+  },
+  totalLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  totalValue: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#28A7E8',
+  },
+  btn: {
+    alignSelf: 'center',
+    marginTop: 20,
+    height: 48,
+    width: '90%',
+    borderRadius: 8,
+    justifyContent: 'center',
+    backgroundColor: '#28A7E8',
+  },
+  btnText: {
+    textAlign: 'center',
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+export default NotificationsModal;