62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import {
|
|
IonIcon,
|
|
IonLabel,
|
|
IonRouterOutlet,
|
|
IonSplitPane,
|
|
IonTabBar,
|
|
IonTabButton,
|
|
IonTabs,
|
|
} from '@ionic/react';
|
|
|
|
import { cloudOutline, searchOutline } from 'ionicons/icons';
|
|
import { Route, Redirect } from 'react-router';
|
|
import Menu from './components/Menu';
|
|
|
|
import All from './AppPages/All';
|
|
import ActionSheet from './AppPages/ActionSheet';
|
|
import Alert from './AppPages/Alert';
|
|
import Loading from './AppPages/Loading';
|
|
import Modal from './AppPages/Modal';
|
|
import Picker from './AppPages/Picker';
|
|
import Popover from './AppPages/Popover';
|
|
import Toast from './AppPages/Toast';
|
|
import './style.scss';
|
|
|
|
function DemoReactOverlayHooks() {
|
|
const pages = [
|
|
{ label: 'All', url: '/overlay/all', component: All },
|
|
{ label: 'Action Sheet', url: '/overlay/action-sheet', component: ActionSheet },
|
|
{ label: 'Alert', url: '/overlay/alert', component: Alert },
|
|
{ label: 'Loading', url: '/overlay/loading', component: Loading },
|
|
{ label: 'Modal', url: '/overlay/modal', component: Modal },
|
|
{ label: 'Picker', url: '/overlay/picker', component: Picker },
|
|
{ label: 'Popover', url: '/overlay/popover', component: Popover },
|
|
{ label: 'Toast', url: '/overlay/toast', component: Toast },
|
|
];
|
|
|
|
return (
|
|
<IonSplitPane contentId="main">
|
|
<Menu pages={pages} />
|
|
<IonRouterOutlet id="main">
|
|
<Route path="/demo-react-overlay-hooks" exact={true}>
|
|
<Redirect to="/demo-react-overlay-hooks/overlay/all" />
|
|
</Route>
|
|
{pages.map((page, index) => {
|
|
const pageComponent = page.component;
|
|
|
|
return (
|
|
<Route
|
|
key={index}
|
|
path={`/demo-react-overlay-hooks${page.url}`}
|
|
exact={true}
|
|
component={pageComponent}
|
|
/>
|
|
);
|
|
})}
|
|
</IonRouterOutlet>
|
|
</IonSplitPane>
|
|
);
|
|
}
|
|
|
|
export default DemoReactOverlayHooks;
|