init commit,

03_source/mobile_notworking.del/src/pages/events/EventIonCard.tsx

@@ -0,0 +1,100 @@
+// REQ0041-home_discover_event_tab
+
+import { IonButton, IonCard, IonCardContent, IonIcon, IonImg, IonNavLink } from '@ionic/react';
+import { bookmarkOutline, logoApple, logoIonic } from 'ionicons/icons';
+import React, { useEffect, useState } from 'react';
+import './style.scss';
+
+import Loading from '../../components/Loading';
+import EventDetail from '../event_detail';
+// url('/assets/img/about/austin.jpg');
+
+interface AboutProps {
+  event_summary: any;
+}
+
+const EventIonCard: React.FC<AboutProps> = ({ event_summary }) => {
+  const [page_content, setPageContent] = useState(null);
+
+  useEffect(() => {
+    setPageContent({
+      title: event_summary.title,
+      price: event_summary.price,
+      currency: 'HKD',
+      NUM_M: event_summary.male_count,
+      NUM_F: event_summary.female_count,
+      image: '/assets/img/samples/party_image.png',
+    });
+
+    console.log({ party_event: event_summary });
+  }, [event_summary]);
+
+  if (!page_content) return <Loading />;
+
+  return (
+    <>
+      <div>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            position: 'relative',
+            height: 0,
+            top: 'calc( 100vw * 3 / 4 - 150px )',
+            right: 20,
+            zIndex: 999,
+          }}
+        >
+          <IonButton
+            shape="round"
+            fill="none"
+            size="large"
+            onClick={e => {
+              e.stopPropagation();
+            }}
+          >
+            <IonIcon slot="icon-only" ios={logoApple} md={bookmarkOutline}></IonIcon>
+          </IonButton>
+        </div>
+        <IonNavLink routerDirection="forward" component={() => <EventDetail party_event={event_summary} />}>
+          <IonCard button style={{ borderRadius: '1rem', border: '1px solid rgba(0,0,0,0.1)' }}>
+            <IonImg src={page_content.image} alt="party image"></IonImg>
+            <IonCardContent>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+                <div style={{ fontSize: '1.2rem' }}>{page_content.title}</div>
+                <div style={{ fontWeight: 'bold', fontSize: '1rem' }}>
+                  {page_content.currency}
+                  {page_content.price}
+                </div>
+              </div>
+
+              <div
+                style={{
+                  paddingTop: '0.5rem',
+                  display: 'flex',
+                  flexDirection: 'row',
+                  gap: '1rem',
+                }}
+              >
+                <div style={{ display: 'flex', flexDirection: 'row', gap: '0.25rem', alignItems: 'center' }}>
+                  <IonIcon icon={logoIonic}></IonIcon>
+                  <div>{page_content.NUM_M + page_content.NUM_F}</div>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'row', gap: '0.25rem', alignItems: 'center' }}>
+                  <IonIcon icon={logoIonic}></IonIcon>
+                  <div>{page_content.NUM_M}</div>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'row', gap: '0.25rem', alignItems: 'center' }}>
+                  <IonIcon icon={logoIonic}></IonIcon>
+                  <div>{page_content.NUM_F}</div>
+                </div>
+              </div>
+            </IonCardContent>
+          </IonCard>
+        </IonNavLink>
+      </div>
+    </>
+  );
+};
+
+export default React.memo(EventIonCard);

03_source/mobile_notworking.del/src/pages/events/PageOne.tsx

@@ -0,0 +1,60 @@
+// REQ0041/home_discover_event_tab
+
+import { IonBackButton, IonButton, IonButtons, IonContent, IonIcon, IonItem, IonList, IonTitle } from '@ionic/react';
+import { chevronBackOutline, settingsSharp } from 'ionicons/icons';
+import React from 'react';
+import './style.scss';
+
+import EventIonCard from './EventIonCard';
+
+import { useListPartyEventSummaries } from '../../hooks/useListPartyEventSummaries';
+
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import HKPartyIonHeader from '../../components/HKPartyIonHeader';
+import HKPartyIonToolbar from '../../components/HKPartyIonToolbar';
+import Loading from '../../components/Loading';
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+interface AboutProps {}
+
+const Events: React.FC<AboutProps> = () => {
+  // const { party_event_summaries } = useContext(AppContext);
+  const [party_event_summaries] = useListPartyEventSummaries();
+
+  // TODO: loading screen
+  if (!party_event_summaries) return <Loading />;
+  if (party_event_summaries && party_event_summaries.length === 0) return <Loading />;
+
+  return (
+    <>
+      <HKPartyIonHeader>
+        <HKPartyIonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton icon={chevronBackOutline}></IonBackButton>
+          </IonButtons>
+          <IonTitle>{'Discover events'}</IonTitle>
+          <IonButtons>
+            <IonButton id="click-trigger">
+              <IonIcon slot="icon-only" ios={settingsSharp} md={settingsSharp}></IonIcon>
+            </IonButton>
+          </IonButtons>
+        </HKPartyIonToolbar>
+      </HKPartyIonHeader>
+
+      <IonContent>
+        <IonList>
+          {party_event_summaries.map((event_summary, i) => (
+            <IonItem key={i} lines="none">
+              <EventIonCard event_summary={event_summary} />
+            </IonItem>
+          ))}
+        </IonList>
+      </IonContent>
+    </>
+  );
+};
+
+export default React.memo(Events);

03_source/mobile_notworking.del/src/pages/events/index.tsx

@@ -0,0 +1,23 @@
+// REQ0041/home_discover_event_tab
+
+import { IonContent, IonPage } from '@ionic/react';
+import React from 'react';
+import './style.scss';
+
+import PageOne from './PageOne';
+
+interface AboutProps {}
+
+const Events: React.FC<AboutProps> = () => {
+  return (
+    <>
+      <IonPage id="events-page">
+        <IonContent>
+          <PageOne />
+        </IonContent>
+      </IonPage>
+    </>
+  );
+};
+
+export default React.memo(Events);

03_source/mobile_notworking.del/src/pages/events/page-two.tsx

@@ -0,0 +1,25 @@
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonToolbar } from '@ionic/react';
+import { chevronBackOutline } from 'ionicons/icons';
+
+function ShowEventDetail() {
+  return (
+    <>
+      {/*  */}
+      <IonHeader className="ion-no-border">
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton icon={chevronBackOutline}></IonBackButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      {/*  */}
+      <IonContent className="ion-padding">
+        <h1>Page Two</h1>
+        <p>Use the back button to navigate to the previous page.</p>
+      </IonContent>
+      {/*  */}
+    </>
+  );
+}
+
+export default ShowEventDetail;

03_source/mobile_notworking.del/src/pages/events/style.scss

@@ -0,0 +1,103 @@
+#about-page {
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  ion-toolbar ion-back-button,
+  ion-toolbar ion-button,
+  ion-toolbar ion-menu-button {
+    --color: white;
+  }
+
+  .about-header {
+    position: relative;
+
+    width: 100%;
+    height: 30%;
+  }
+
+  .about-header .about-image {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    opacity: 0;
+
+    transition: opacity 500ms ease-in-out;
+  }
+
+  .about-header .madison {
+    background-image: url('/assets/img/about/madison.jpg');
+  }
+
+  .about-header .austin {
+    background-image: url('/assets/img/about/austin.jpg');
+  }
+
+  .about-header .chicago {
+    background-image: url('/assets/img/about/chicago.jpg');
+  }
+
+  .about-header .seattle {
+    background-image: url('/assets/img/about/seattle.jpg');
+  }
+
+  .about-info {
+    position: relative;
+    margin-top: -10px;
+    border-radius: 10px;
+    background: var(--ion-background-color, #fff);
+    z-index: 2; // display rounded border above header image
+  }
+
+  .about-info h3 {
+    margin-top: 0;
+  }
+
+  .about-info ion-list {
+    padding-top: 0;
+  }
+
+  .about-info p {
+    line-height: 130%;
+
+    color: var(--ion-color-dark);
+  }
+
+  .about-info ion-icon {
+    margin-inline-end: 32px;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}