feat: add CarousellMe feature with profile, listings and reviews components

03_source/mobile/src/pages/CarousellMe/AboutContent.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+// import { useTranslation } from 'react-i18next';
+// import StarRatings from 'react-star-ratings';
+
+import {
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+  IonContent,
+  IonPage,
+  IonButtons,
+  IonBadge,
+  IonMenuButton,
+  IonButton,
+  IonIcon,
+  IonDatetime,
+  IonSelectOption,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonSelect,
+  IonPopover,
+  IonText,
+  IonCard,
+  IonCardHeader,
+  IonCardTitle,
+  IonCardSubtitle,
+  IonCardContent,
+  IonTabs,
+  IonTabBar,
+  IonTabButton,
+  IonSegment,
+  IonSegmentButton,
+  useIonRouter,
+} from '@ionic/react';
+import './style.scss';
+import {
+  locationSharp,
+  settingsOutline,
+  qrCode,
+  shareSocialOutline,
+  ellipsisHorizontal,
+  ellipsisVertical,
+  logoFacebook,
+  phonePortraitSharp,
+  pricetagSharp,
+  archiveSharp,
+  calendar,
+  personCircle,
+  map,
+  informationCircle,
+  mailSharp,
+  chevronDownSharp,
+  chevronForwardSharp,
+} from 'ionicons/icons';
+// import AboutPopover from '../../components/AboutPopover';
+import { format, parseISO } from 'date-fns';
+
+import lookForVisitorSvg from './look_for_visitor.svg';
+
+type SessionListProps = {
+  hide: boolean;
+};
+
+const AboutContent: React.FC<SessionListProps> = ({ hide }) => {
+  let route = useIonRouter();
+
+  if (hide) return <></>;
+  return (
+    <>
+      <div
+        style={{
+          //
+          paddingTop: '1rem',
+          paddingLeft: '1rem',
+          paddingRight: '1rem',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+        }}
+      >
+        <div>
+          <IonText color="tertiary" style={{ fontSize: '0.8rem' }}>
+            <IonText style={{ fontWeight: 'bold' }} color="success">
+              25
+            </IonText>
+            <IonText>Followers</IonText>
+            {'   '}
+            <IonText style={{ fontWeight: 'bold' }} color="success">
+              0
+            </IonText>
+            <IonText>Followers</IonText>
+          </IonText>
+        </div>
+
+        <div
+          style={{
+            paddingBottom: '3rem',
+          }}
+        >
+          <IonText style={{ fontSize: '0.9rem' }}>
+            <p>接受 payme / 支付寳 / FPS：</p>
+            <p>Accepting HSBC payme / alipay / FPS </p>
+            <p>更多資料 / for more detail:</p>
+            <p>https://louiscklaw.github.io/carousell </p>
+            <p>歡迎PM查詢</p>
+          </IonText>
+        </div>
+      </div>
+
+      {/* private information */}
+      <IonList>
+        <IonItem lines="none">
+          <h3>Private information</h3>
+        </IonItem>
+        <IonItem
+          lines="full"
+          button
+          onClick={(e) => {
+            route.push('/tabs/carousell_me/OffersMade');
+          }}
+        >
+          <IonText style={{ fontSize: '0.9rem' }}>My Offers</IonText>
+        </IonItem>
+      </IonList>
+    </>
+  );
+};
+
+export default AboutContent;