late fee added

2025-09-25 16:58:02 +05:30
parent d29cff589b 0226611697
commit a303af566e
11 changed files with 750 additions and 159 deletions
@@ -0,0 +1,189 @@
+import React, { useRef } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  Animated,
+} from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import { Ionicons, IoniconsIconName } from "@react-native-vector-icons/ionicons";
+import colors from "../colors";
+
+type CardProps = {
+  title: string;
+  subtitle?: string;
+  iconName?: IoniconsIconName;
+  onPress?: () => void;
+  backOne?: string;
+  backTwo?: string
+};
+
+const AnimatedCard: React.FC<CardProps> = ({
+  title,
+  subtitle,
+  iconName = "ellipse",
+  onPress,
+  backOne = '#4facfe',
+  backTwo = '#00f2fe'
+}) => {
+  const scale = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    Animated.spring(scale, {
+      toValue: 0.96,
+      useNativeDriver: true,
+      friction: 4,
+    }).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      useNativeDriver: true,
+      friction: 4,
+    }).start(() => onPress && onPress());
+  };
+
+  return (
+    <TouchableWithoutFeedback
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+    >
+      <Animated.View style={[styles.card, { transform: [{ scale }] }]}>
+        <LinearGradient
+          colors={[backOne, backTwo]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.gradient}
+        >
+          {/* Decorative Graphics */}
+          <View style={styles.graphicCircleLarge} />
+          <View style={styles.graphicCircleMedium} />
+          <View style={styles.graphicCircleSmall} />
+          <View style={styles.graphicTriangleTop} />
+          <View style={styles.graphicTriangleBottom} />
+
+          {/* Content */}
+          <View style={styles.content}>
+            {iconName && (
+              <Ionicons
+                name={iconName}
+                size={32}
+                color="#fff"
+                style={styles.icon}
+              />
+            )}
+            <View style={styles.textContainer}>
+              <Text style={styles.title}>{title}</Text>
+              {subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+            </View>
+          </View>
+        </LinearGradient>
+      </Animated.View>
+    </TouchableWithoutFeedback>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    // marginHorizontal: 16,
+    marginVertical: 10,
+    borderRadius: 20,
+    overflow: "hidden",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    elevation: 8,
+  },
+  gradient: {
+    minHeight: 120,
+    position: "relative",
+  },
+  // Graphics
+  graphicCircleLarge: {
+    position: "absolute",
+    top: -20,
+    right: -20,
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: "rgba(124, 80, 80, 0.42)",
+  },
+  graphicCircleMedium: {
+    position: "absolute",
+    bottom: 30,
+    left: -15,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "rgba(122, 41, 41, 0.39)",
+  },
+  graphicCircleSmall: {
+    position: "absolute",
+    bottom: -10,
+    right: 40,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: "rgba(207, 110, 80, 0.25)",
+  },
+  graphicTriangleTop: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0,
+    borderStyle: "solid",
+    borderRightWidth: 60,
+    borderTopWidth: 60,
+    borderRightColor: "transparent",
+    borderTopColor: "rgba(143, 62, 62, 0.31)",
+  },
+  graphicTriangleBottom: {
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    width: 0,
+    height: 0,
+    borderStyle: "solid",
+    borderLeftWidth: 40,
+    borderBottomWidth: 40,
+    borderLeftColor: "transparent",
+    borderBottomColor: "rgba(172, 51, 51, 0.27)",
+  },
+  content: {
+    flexDirection: "row", // stack vertically
+    alignItems: "center",    // center horizontally
+    justifyContent: "center", // center vertically
+    padding: 20,
+    position: "relative",
+    zIndex: 1,
+    alignSelf: "center",
+    flex:1
+  }
+  ,
+  icon: {
+    marginRight: 12,
+  },
+  textContainer: {
+    // alignItems: "center", // centers title and subtitle
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "700",
+    color: "#fff",
+    marginBottom: 4,
+    textTransform:'uppercase'
+    // textAlign: "center",
+  },
+  subtitle: {
+    fontSize: 14,
+    color: colors.primary,
+    fontWeight: "500",
+    textAlign: "center",
+  },
+});
+
+export default AnimatedCard;