update,

03_source/mobile/src/pages/DemoFacebookClone/components/Post.tsx

@@ -0,0 +1,96 @@
+import {
+  IonAvatar,
+  IonButton,
+  IonCol,
+  IonIcon,
+  IonImg,
+  IonItem,
+  IonLabel,
+  IonRow,
+  IonText,
+} from '@ionic/react';
+import {
+  arrowRedoOutline,
+  chatboxOutline,
+  ellipsisHorizontal,
+  globe,
+  heart,
+  thumbsUp,
+  thumbsUpOutline,
+} from 'ionicons/icons';
+import '../pages/Tab2.css';
+import React from 'react';
+
+const Post = (props): React.JSX.Element => {
+  const { post } = props;
+
+  return (
+    <IonRow className="ion-no-padding ion-no-margin post">
+      <IonCol size="12" className="ion-no-padding ion-no-margin">
+        <div className="post-container">
+          <IonItem lines="none" className="post-header ion-no-margin ion-no-padding">
+            <IonAvatar slot="start" className="ion-no-padding ion-no-margin">
+              <IonImg src={post.avatar} />
+            </IonAvatar>
+
+            <IonLabel>
+              <h3>{post.name}</h3>
+              <p>
+                {post.sponsored ? 'Sponsored' : post.time}
+                &nbsp;&nbsp;
+                <IonIcon icon={globe} />
+              </p>
+            </IonLabel>
+
+            <IonIcon icon={ellipsisHorizontal} />
+          </IonItem>
+
+          <IonItem lines="none" className="post-content ion-no-margin ion-no-padding">
+            <p>{post.message}</p>
+          </IonItem>
+
+          {post.image && <IonImg src={post.image} />}
+
+          {post.sponsored && (
+            <div className="post-link ion-no-margin ion-no-padding">
+              <IonLabel>
+                <p>ionicframework.com</p>
+                <h3>Start building apps today!</h3>
+              </IonLabel>
+
+              <IonButton>Learn more</IonButton>
+            </div>
+          )}
+
+          <div className="post-likes ion-no-margin ion-no-padding">
+            <div className="post-like-icons">
+              <IonIcon icon={thumbsUp} />
+              <IonIcon icon={heart} />
+            </div>
+
+            {post.sponsored && <p>{post.views} Views</p>}
+          </div>
+
+          <div className="post-actions ion-no-margin ion-no-padding ion-text-center">
+            <IonCol size="4">
+              <IonIcon icon={thumbsUpOutline} />
+              <IonText>Like</IonText>
+            </IonCol>
+
+            <IonCol size="4">
+              <IonIcon icon={chatboxOutline} />
+              <IonText>Comment</IonText>
+            </IonCol>
+
+            <IonCol size="4">
+              <IonIcon icon={arrowRedoOutline} />
+              <IonText>Share</IonText>
+            </IonCol>
+          </div>
+        </div>
+      </IonCol>
+    </IonRow>
+  );
+};
+
+export default Post;