60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react';
|
|
|
|
import {
|
|
brushOutline,
|
|
cloudOutline,
|
|
handLeftOutline,
|
|
informationCircle,
|
|
searchOutline,
|
|
} from 'ionicons/icons';
|
|
|
|
import { Route, Redirect } from 'react-router';
|
|
|
|
import './theme/variables.scss';
|
|
|
|
import ThemeStore from './store/ThemeStore';
|
|
import Info from './pages/Info';
|
|
import Themes from './pages/Themes';
|
|
import Examples from './pages/Examples';
|
|
|
|
function DemoReactThemeSwitcher() {
|
|
const theme = ThemeStore.useState((s) => s.currentTheme);
|
|
|
|
return (
|
|
<div className="helloworld" style={theme ? theme : {}}>
|
|
<IonTabs>
|
|
<IonRouterOutlet>
|
|
<Route exact path="/demo-react-theme-switcher/info">
|
|
<Info />
|
|
</Route>
|
|
<Route exact path="/demo-react-theme-switcher/themes">
|
|
<Themes />
|
|
</Route>
|
|
<Route exact path="/demo-react-theme-switcher/examples">
|
|
<Examples />
|
|
</Route>
|
|
|
|
<Redirect exact path="/demo-react-theme-switcher" to="/demo-react-theme-switcher/info" />
|
|
</IonRouterOutlet>
|
|
|
|
<IonTabBar slot="bottom">
|
|
<IonTabButton tab="tab1" href="/demo-react-theme-switcher/info">
|
|
<IonIcon icon={informationCircle} />
|
|
<IonLabel>Info</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="tab2" href="/demo-react-theme-switcher/themes">
|
|
<IonIcon icon={brushOutline} />
|
|
<IonLabel>Themes</IonLabel>
|
|
</IonTabButton>
|
|
<IonTabButton tab="tab3" href="/demo-react-theme-switcher/examples">
|
|
<IonIcon icon={handLeftOutline} />
|
|
<IonLabel>Examples</IonLabel>
|
|
</IonTabButton>
|
|
</IonTabBar>
|
|
</IonTabs>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DemoReactThemeSwitcher;
|