update DemoReactMarvelApp,

03_source/mobile/src/pages/DemoReactMarvelApp/components/CharacterItem.module.scss

@@ -0,0 +1,43 @@
+.characterContainer {
+
+    position: relative;
+    text-align: center;
+    color: white;
+}
+
+ion-item {
+    --padding-start: 0;
+    --inner-padding-end: 0;
+}
+
+ion-label {
+    margin-top: 12px;
+    margin-bottom: 12px;
+}
+
+.characterNameContainer {
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    align-content: center;
+    position: absolute;
+    z-index: 99999;
+    background-color: rgba(0, 0, 0, 0.7);
+    bottom: 0;
+    width: 100%;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+.characterNameContainer ion-icon {
+
+    margin-top: 0.1rem;
+}
+
+.characterNameContainer ion-label {
+
+    font-size: 1rem;
+    font-weight: 500;
+}

03_source/mobile/src/pages/DemoReactMarvelApp/components/CharacterItem.tsx

@@ -0,0 +1,50 @@
+import { IonCol, IonIcon, IonImg, IonItem, IonLabel, IonSkeletonText } from "@ionic/react";
+import { chevronForwardOutline } from "ionicons/icons";
+import { Character } from "../../types";
+import styles from "./CharacterItem.module.scss";
+
+interface Props {
+    details: Character;
+    load?: boolean;
+    grid?: boolean;
+}
+
+const CharacterItem = (props: Props): React.JSX.Element => {
+
+    const { details, load = false, grid = true } = props;
+    const loadAmount = 20;
+
+    if (!load) {
+        return (
+
+            <IonCol size={ grid ? "6" : "12" }>
+                <IonItem detail={ false } routerLink={ `/character/${ details.id }` } lines="none" className={ styles.characterContainer }>
+                    <IonImg src={ grid ? `${ details.thumbnail.path }/standard_fantastic.${ details.thumbnail.extension }` : `${ details.thumbnail.path }.${ details.thumbnail.extension }` } />
+                    <div className={ styles.characterNameContainer }>
+                        <IonLabel>{ details.name }</IonLabel>
+                        <IonIcon icon={ chevronForwardOutline } />
+                    </div>
+                </IonItem>
+            </IonCol>
+        );
+    } else {
+
+        return (
+
+            <>
+                { Array.from({length: loadAmount }, (item, index) => {
+
+                    return (
+                        <IonCol key={ `loading_${ index }`} size="6">
+                            <IonItem lines="none" className={ styles.characterContainer }>
+                                <IonSkeletonText animated style={{ width: "100%", height: "180px" }} />
+                            </IonItem>
+                        </IonCol>
+                    );
+                })}
+            </>
+        );
+    }
+}
+
+export default CharacterItem;