91 lines
2.2 KiB
JavaScript
91 lines
2.2 KiB
JavaScript
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(null);
|
|
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;
|