`apps/mobile/components/ErrorCard.tsx`

67 lines
import React from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { Colors, Radius, Spacing, Typography } from "../constants/theme";

interface Props {
  message: string;
  onRetry?: () => void;
  title?: string;
}

export function ErrorCard({ message, onRetry, title = "Connection Error" }: Props) {
  return (
    <View style={styles.container}>
      <Text style={styles.icon}>!</Text>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.message}>{message}</Text>
      {onRetry && (
        <TouchableOpacity style={styles.retryBtn} onPress={onRetry} activeOpacity={0.7}>
          <Text style={styles.retryText}>Retry</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: Spacing.lg,
    padding: Spacing.xl,
    backgroundColor: Colors.surface,
    borderRadius: Radius.lg,
    borderWidth: 1,
    borderColor: Colors.loss,
    alignItems: "center",
  },
  icon: {
    fontSize: 32,
    color: Colors.loss,
    fontWeight: "700",
    marginBottom: Spacing.sm,
  },
  title: {
    fontSize: Typography.sizes.md,
    color: Colors.textPrimary,
    fontWeight: "700",
    marginBottom: Spacing.sm,
  },
  message: {
    fontSize: Typography.sizes.sm,
    color: Colors.textSecondary,
    textAlign: "center",
    lineHeight: 18,
  },
  retryBtn: {
    marginTop: Spacing.lg,
    paddingHorizontal: Spacing.xl,
    paddingVertical: Spacing.sm,
    backgroundColor: Colors.accent,
    borderRadius: Radius.md,
  },
  retryText: {
    color: Colors.textPrimary,
    fontSize: Typography.sizes.base,
    fontWeight: "600",
  },
});