ui fix

2025-09-29 16:32:39 +05:30
parent a624af60b7
commit 7a9ce601cb
12 changed files with 773 additions and 617 deletions
@@ -0,0 +1,177 @@
+// src/components/CustomAlert.tsx
+
+import React from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+} from "react-native";
+import { BlurView } from "@react-native-community/blur";
+import Ionicons from '@react-native-vector-icons/ionicons';
+import colors from "./colors"; // Import centralized colors
+
+interface AlertButton {
+  text: string;
+  onPress: () => void;
+  style?: "cancel" | "destructive" | "default";
+}
+
+interface CustomAlertProps {
+  visible: boolean;
+  title: string;
+  message: string;
+  buttons: AlertButton[];
+  alertType?: 'error' | 'success' | 'info';
+}
+
+const CustomAlert: React.FC<CustomAlertProps> = ({
+  visible,
+  title,
+  message,
+  buttons,
+  alertType = 'info',
+}) => {
+
+  const getIcon = () => {
+    switch (alertType) {
+      case 'error':
+        return { name: "close-circle", color: colors.error };
+      case 'success':
+        return { name: "checkmark-circle", color: colors.success };
+      default:
+        return { name: "information-circle", color: colors.primary };
+    }
+  };
+
+  const icon = getIcon();
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      onRequestClose={() => {
+        const closeButton = buttons.find(b => b.style === 'cancel') || buttons[0];
+        closeButton?.onPress();
+      }}
+    >
+      <View style={styles.centeredView}>
+        {Platform.OS === 'ios' ? (
+          <BlurView style={styles.absolute} blurType="light" blurAmount={5} />
+        ) : (
+          <View style={[styles.absolute, { backgroundColor: colors.androidBackdrop }]} />
+        )}
+
+        <View style={styles.alertBox}>
+          <View style={styles.iconContainer}>
+            <Ionicons name={icon.name} size={48} color={icon.color} />
+          </View>
+          <Text style={styles.alertTitle}>{title}</Text>
+          <Text style={styles.alertMessage}>{message}</Text>
+
+          <View style={styles.buttonContainer}>
+            {buttons.map((button, index) => (
+              <TouchableOpacity
+                key={index}
+                style={[
+                  styles.button,
+                  button.style === 'destructive' ? styles.destructiveButton : styles.defaultButton,
+                ]}
+                onPress={button.onPress}
+              >
+                <Text style={[
+                  styles.buttonText,
+                  button.style === 'destructive' ? styles.destructiveButtonText : styles.defaultButtonText
+                ]}>
+                  {button.text}
+                </Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  },
+  alertBox: {
+    backgroundColor: colors.alertBackground,
+    borderRadius: 24,
+    padding: 24,
+    alignItems: "center",
+    margin: 24,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.5)',
+    shadowColor: colors.black,
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.1,
+    shadowRadius: 30,
+    elevation: 20,
+    width: '90%',
+    maxWidth: 400,
+  },
+  iconContainer: {
+    marginBottom: 16,
+  },
+  alertTitle: {
+    fontSize: 22,
+    fontWeight: "bold",
+    color: colors.textDark,
+    marginBottom: 8,
+    textAlign: "center",
+  },
+  alertMessage: {
+    fontSize: 16,
+    color: colors.textLight,
+    textAlign: "center",
+    marginBottom: 24,
+    lineHeight: 22,
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: 'flex-end',
+    width: "100%",
+    gap: 12,
+  },
+  button: {
+    paddingVertical: 14,
+    paddingHorizontal: 24,
+    borderRadius: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  defaultButton: {
+    backgroundColor: colors.primary,
+  },
+  destructiveButton: {
+    backgroundColor: colors.error,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "700",
+  },
+  defaultButtonText: {
+    color: colors.white,
+  },
+  destructiveButtonText: {
+    color: colors.white,
+  },
+});
+
+export default CustomAlert;