move connection error message to own component

amnet-native/app/ServerCardIn.tsx

@@ -1,10 +1,21 @@
 import {BSON} from "realm";
-import {fetchServerInfo, performCardIn} from "amnet-shared";
+import {fetchServerInfo, getGameName, performCardIn} from "amnet-shared";
 import React, {useCallback, useEffect, useLayoutEffect, useMemo, useState} from "react";
-import {ActivityIndicator, Button, Card, Paragraph, Title, useTheme} from "react-native-paper";
+import {ActivityIndicator, Button, Paragraph, Title, useTheme} from "react-native-paper";
 import {Alert, RefreshControl, ScrollView, Share, StyleSheet, TouchableOpacity, View} from "react-native";
-import {CircleCheck, CircleDot, CreditCard, Nfc, Plus, SmartphoneNfcIcon, WifiOff, Share as ShareIcon} from "lucide-react-native";
+import {
+    CircleCheck,
+    CircleDot,
+    CreditCard,
+    Nfc,
+    Plus,
+    SmartphoneNfcIcon,
+    Share as ShareIcon,
+    WifiOff,
+} from "lucide-react-native";
+
 import {EmptyStatePlaceholder} from "../components/EmptyStatePlaceholder";
+import {AMUIStatusAlert} from "../components/AMUIStatusAlert";
 import {AimeCard} from "../components/AimeCard";
 
 import RealmContext from "../models/RealmContext";
@@ -153,22 +164,7 @@ export default function ServerCardIn({route, navigation}) {
                                                         setServerRefreshing(true);
                                                         setServerReloadCounter(serverReloadCounter + 1);
                                                     }}/>}>
-            {!connectionTestResult && (
-                <Card mode="outlined" style={{borderColor: theme.colors.secondary}}>
-                    <Card.Content>
-                        <View style={{alignItems: "center", flexDirection: "row", gap: 10}}>
-                            <WifiOff color={theme.colors.secondary} size={24}/>
-                            <Title style={{color: theme.colors.secondary}}>Connection Failed</Title>
-                        </View>
-                        <Paragraph>
-                            There was an issue connecting to <Paragraph
-                            style={{fontFamily: "JetBrainsMono_400Regular"}}>{server.serverAddress}</Paragraph>.
-                            Check the network connection and try again.
-                        </Paragraph>
-                    </Card.Content>
-                </Card>
-            )}
-
+            <StatusAlert server={server} connectionEstablished={connectionTestResult}/>
             <View style={styles.section}>
                 <Title style={styles.sectionTitle}>{gameName ? `Play ${gameName}` : "Selected Card"}</Title>
                 {selectedCard ? <>
@@ -197,7 +193,7 @@ export default function ServerCardIn({route, navigation}) {
 
             {cards.length > 0 && (
                 <View style={styles.section}>
-                    <Title style={{fontWeight: "bold"}}>Additional Cards</Title>
+                    <Title style={styles.sectionTitle}>Additional Cards</Title>
                     <Button mode="contained"
                             textColor="white"
                             buttonColor={theme.colors.tertiary}
@@ -222,10 +218,29 @@ export default function ServerCardIn({route, navigation}) {
     )
 }
 
+function StatusAlert(props: {server: AMServer, connectionEstablished: boolean}) {
+    if (!props.connectionEstablished) {
+        return (
+            <AMUIStatusAlert color={"red"} icon={WifiOff} title={"Connection Failed"}>
+                <Paragraph>
+                    There was an issue connecting to <Paragraph
+                    style={{fontFamily: "JetBrainsMono_400Regular"}}>{props.server.serverAddress}</Paragraph>.
+                    Check the network connection and try again.
+                </Paragraph>
+            </AMUIStatusAlert>
+        );
+    }
+
+    return null;
+}
+
 const styles = StyleSheet.create({
     section: {
         gap: 10
     },
+    sectionTitle: {
+        fontWeight: "bold"
+    },
     emptyPlaceholderView: {
         marginVertical: 30,
         gap: 15
@@ -235,4 +250,4 @@ const styles = StyleSheet.create({
         paddingBottom: 25,
         gap: 20
     }
-})
+});

amnet-native/components/AMUIStatusAlert.tsx

@@ -0,0 +1,22 @@
+import {View} from "react-native";
+import React, {ReactNode} from "react";
+import {Card, Title} from "react-native-paper";
+import {LucideIcon, LucideProps} from "lucide-react-native";
+
+export function AMUIStatusAlert(props: { title: string, color: string, icon: LucideIcon, children?: ReactNode }) {
+    return (
+        <Card mode="outlined" style={{borderColor: props.color}}>
+            <Card.Content>
+                <View style={{alignItems: "center", flexDirection: "row", gap: 10}}>
+                    {renderIconWithProps(props.icon, {size: 22, color: props.color})}
+                    <Title style={{color: props.color}}>{props.title}</Title>
+                </View>
+                {props.children}
+            </Card.Content>
+        </Card>  
+    );
+}
+
+function renderIconWithProps(icon: LucideIcon, additionalProps: Partial<LucideProps>) {
+    return React.cloneElement(React.createElement(icon), additionalProps);
+}