82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
// REQ0116/main-tab
|
|
|
|
import React from 'react';
|
|
import { IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
|
|
import { Route, Redirect } from 'react-router';
|
|
import { calendar, location, informationCircle, people } from 'ionicons/icons';
|
|
import SchedulePage from '../SchedulePage';
|
|
import SpeakerList from '../SpeakerList';
|
|
import SpeakerDetail from '../SpeakerDetail';
|
|
import SessionDetail from '../SessionDetail';
|
|
import MapView from '../MapView';
|
|
import About from '../About';
|
|
import EventList from '../EventList';
|
|
import MembersNearByList from '../MembersNearByList';
|
|
import OrderList from '../OrderList';
|
|
import MyProfile from '../MyProfile';
|
|
import MessageList from '../MessageList';
|
|
import PATHS from '../../PATHS';
|
|
import Favourites from '../Favourites';
|
|
import TabAppRoute from '../../TabAppRoute';
|
|
|
|
interface MainTabsProps {}
|
|
|
|
const MainTabs: React.FC<MainTabsProps> = () => {
|
|
return (
|
|
<IonTabs>
|
|
<IonRouterOutlet>
|
|
{/* REQ0117/default-route */}
|
|
<Redirect exact path="/tabs" to="/tabs/events" />
|
|
{/*
|
|
Using the render method prop cuts down the number of renders your components will have due to route changes.
|
|
Use the component prop when your component depends on the RouterComponentProps passed in automatically.
|
|
*/}
|
|
<Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
|
|
<Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
|
|
<Route path="/tabs/speakers/:id" component={SpeakerDetail} exact={true} />
|
|
|
|
<Route path="/tabs/schedule/:id" component={SessionDetail} />
|
|
<Route path="/tabs/speakers/sessions/:id" component={SessionDetail} />
|
|
<Route path="/tabs/map" render={() => <MapView />} exact={true} />
|
|
|
|
<Route path="/tabs/about" render={() => <About />} exact={true} />
|
|
|
|
{/* */}
|
|
<TabAppRoute />
|
|
</IonRouterOutlet>
|
|
{/* */}
|
|
<IonTabBar slot="bottom">
|
|
{/*
|
|
<IonTabButton tab="speakers" href={'/tabs/speakers'}>
|
|
<IonIcon icon={calendar} />
|
|
<IonLabel>Speakers</IonLabel>
|
|
</IonTabButton>
|
|
*/}
|
|
|
|
<IonTabButton tab="events" href={PATHS.EVENT_LIST}>
|
|
<IonIcon icon={calendar} />
|
|
<IonLabel>Event</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="nearby" href={PATHS.NEARBY_LIST}>
|
|
<IonIcon icon={people} />
|
|
<IonLabel>Nearby</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="orders" href={PATHS.ORDERS_LIST}>
|
|
<IonIcon icon={location} />
|
|
<IonLabel>Order</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="message" href={PATHS.MESSAGE_LIST}>
|
|
<IonIcon icon={informationCircle} />
|
|
<IonLabel>Message</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="my_profile" href={PATHS.PROFILE}>
|
|
<IonIcon icon={informationCircle} />
|
|
<IonLabel>Profile</IonLabel>
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
);
|
|
};
|
|
|
|
export default MainTabs;
|