ionic-framework/packages/react/test/base/src/pages/TabsSimilarPrefixes.tsx at e797ca024cb1ef6311bbbdb39388a06a40c4c61e · ionic-team/ionic-framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import {
  IonContent,
  IonHeader,
  IonIcon,
  IonLabel,
  IonPage,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import { homeOutline, radioOutline, libraryOutline } from 'ionicons/icons';
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const HomePage: React.FC = () => (
  <IonPage data-testid="home-page">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <div data-testid="home-content">Home Content</div>
    </IonContent>
  </IonPage>
);

const Home2Page: React.FC = () => (
  <IonPage data-testid="home2-page">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Home 2</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <div data-testid="home2-content">Home 2 Content</div>
    </IonContent>
  </IonPage>
);

const Home3Page: React.FC = () => (
  <IonPage data-testid="home3-page">
    <IonHeader>
      <IonToolbar>
        <IonTitle>Home 3</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <div data-testid="home3-content">Home 3 Content</div>
    </IonContent>
  </IonPage>
);

const TabsSimilarPrefixes: React.FC = () => {
  return (
    <IonTabs data-testid="tabs-similar-prefixes">
      <IonRouterOutlet>
        <Redirect exact path="/tabs-similar-prefixes" to="/tabs-similar-prefixes/home" />
        <Route path="/tabs-similar-prefixes/home" render={() => <HomePage />} exact={true} />
        <Route path="/tabs-similar-prefixes/home2" render={() => <Home2Page />} exact={true} />
        <Route path="/tabs-similar-prefixes/home3" render={() => <Home3Page />} exact={true} />
      </IonRouterOutlet>

      <IonTabBar slot="bottom" data-testid="tab-bar">
        <IonTabButton tab="home" href="/tabs-similar-prefixes/home" data-testid="home-tab">
          <IonIcon icon={homeOutline}></IonIcon>
          <IonLabel>Home</IonLabel>
        </IonTabButton>

        <IonTabButton tab="home2" href="/tabs-similar-prefixes/home2" data-testid="home2-tab">
          <IonIcon icon={radioOutline}></IonIcon>
          <IonLabel>Home 2</IonLabel>
        </IonTabButton>

        <IonTabButton tab="home3" href="/tabs-similar-prefixes/home3" data-testid="home3-tab">
          <IonIcon icon={libraryOutline}></IonIcon>
          <IonLabel>Home 3</IonLabel>
        </IonTabButton>
      </IonTabBar>
    </IonTabs>
  );
};

export default TabsSimilarPrefixes;