"chore: add barcode scanner and clipboard plugins, update dev script to use yarn, and add new demo pages"

03_source/mobile/src/pages/DemoClubHouse/AppPages/Tab1.jsx

@@ -0,0 +1,90 @@
+import {
+  IonButton,
+  IonButtons,
+  IonCol,
+  IonContent,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonPage,
+  IonRow,
+  IonText,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from '@ionic/react';
+import { chevronBack, personOutline } from 'ionicons/icons';
+import { useStoreState } from 'pullstate';
+import { TalkStore } from '../store';
+import { getTalks } from '../store/Selectors';
+import './Tab1.css';
+
+import { TalkCard } from '../components/TalkCard';
+import { useRef } from 'react';
+
+const Tab1 = () => {
+  const pageRef = useRef();
+  const talks = useStoreState(TalkStore, getTalks);
+
+  const router = useIonRouter();
+  function handleBackClick() {
+    router.goBack();
+  }
+
+  return (
+    <IonPage ref={pageRef}>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>All Rooms</IonTitle>
+
+          <IonButtons slot="end">
+            <IonButton>
+              <IonIcon icon={personOutline} />
+            </IonButton>
+          </IonButtons>
+
+          <IonButtons slot="start">
+            <IonButton onclick={handleBackClick}>
+              <IonIcon icon={chevronBack} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonGrid className="ion-padding-start ion-padding-end extra-padding ion-padding-bottom ion-margin-bottom">
+          <IonRow>
+            <IonCol size="12">
+              <IonText color="dark">
+                <p className="title">Upcoming</p>
+              </IonText>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <TalkCard upcoming={true} talk={talks[0]} pageRef={pageRef} />
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              <IonText color="dark">
+                <p className="title">Happening Now</p>
+              </IonText>
+            </IonCol>
+          </IonRow>
+
+          <IonRow>
+            <IonCol size="12">
+              {talks.map((talk, talkIndex) => {
+                return talkIndex > 0 && <TalkCard key={talkIndex} talk={talk} pageRef={pageRef} />;
+              })}
+            </IonCol>
+          </IonRow>
+        </IonGrid>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default Tab1;