84 lines
3.1 KiB
TypeScript
84 lines
3.1 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 Helloworld from './Helloworld';
|
|
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} />
|
|
<Route path="/tabs/helloworld" render={() => <Helloworld />} 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;
|