Kaynağa Gözat

[feat] Add Article, Advice, Law screens

Sergio Mattei 2 yıl önce
ebeveyn
işleme
2eb0518ca5
4 değiştirilmiş dosya ile 130 ekleme ve 9 silme
  1. 19
    9
      src/App.tsx
  2. 30
    0
      src/pages/AdviceListPage.tsx
  3. 51
    0
      src/pages/ArticlePage.tsx
  4. 30
    0
      src/pages/LawListPage.tsx

+ 19
- 9
src/App.tsx Dosyayı Görüntüle

@@ -10,7 +10,7 @@ import {
10 10
   setupIonicReact,
11 11
 } from "@ionic/react";
12 12
 import { IonReactRouter } from "@ionic/react-router";
13
-import { ellipse, square, triangle } from "ionicons/icons";
13
+import { ellipse, home } from "ionicons/icons";
14 14
 import Home from "./pages/Home";
15 15
 
16 16
 /* Core CSS required for Ionic components to work properly */
@@ -31,6 +31,9 @@ import "@ionic/react/css/display.css";
31 31
 
32 32
 /* Theme variables */
33 33
 import "./theme/variables.css";
34
+import AdviceListPage from "./pages/AdviceListPage";
35
+import LawListPage from "./pages/LawListPage";
36
+import ArticlePage from "./pages/ArticlePage";
34 37
 
35 38
 setupIonicReact();
36 39
 
@@ -42,22 +45,29 @@ const App: React.FC = () => (
42 45
           <Route exact path="/home">
43 46
             <Home />
44 47
           </Route>
48
+          <Route path="/advice">
49
+            <AdviceListPage />
50
+          </Route>
51
+          <Route path="/laws">
52
+            <LawListPage />
53
+          </Route>
54
+          <Route path="/article/:slug" component={ArticlePage} />
45 55
           <Route exact path="/">
46 56
             <Redirect to="/home" />
47 57
           </Route>
48 58
         </IonRouterOutlet>
49 59
         <IonTabBar slot="bottom">
50
-          <IonTabButton tab="tab1" href="/tab1">
51
-            <IonIcon icon={triangle} />
52
-            <IonLabel>Tab 1</IonLabel>
60
+          <IonTabButton tab="home" href="/home">
61
+            <IonIcon icon={home} />
62
+            <IonLabel>Home</IonLabel>
53 63
           </IonTabButton>
54
-          <IonTabButton tab="tab2" href="/tab2">
64
+          <IonTabButton tab="advice" href="/advice">
55 65
             <IonIcon icon={ellipse} />
56
-            <IonLabel>Tab 2</IonLabel>
66
+            <IonLabel>Advice</IonLabel>
57 67
           </IonTabButton>
58
-          <IonTabButton tab="tab3" href="/tab3">
59
-            <IonIcon icon={square} />
60
-            <IonLabel>Tab 3</IonLabel>
68
+          <IonTabButton tab="laws" href="/laws">
69
+            <IonIcon icon={ellipse} />
70
+            <IonLabel>Laws</IonLabel>
61 71
           </IonTabButton>
62 72
         </IonTabBar>
63 73
       </IonTabs>

+ 30
- 0
src/pages/AdviceListPage.tsx Dosyayı Görüntüle

@@ -0,0 +1,30 @@
1
+import {
2
+  IonContent,
3
+  IonHeader,
4
+  IonPage,
5
+  IonTitle,
6
+  IonToolbar,
7
+} from "@ionic/react";
8
+import ListComponent from "../components/ListComponent";
9
+
10
+const AdviceListPage: React.FC = () => {
11
+  return (
12
+    <IonPage>
13
+      <IonHeader>
14
+        <IonToolbar>
15
+          <IonTitle>Consejos</IonTitle>
16
+        </IonToolbar>
17
+      </IonHeader>
18
+      <IonContent fullscreen>
19
+        <IonHeader collapse="condense">
20
+          <IonToolbar>
21
+            <IonTitle size="large">Consejos</IonTitle>
22
+          </IonToolbar>
23
+        </IonHeader>
24
+        <ListComponent laws={["Consejo 1", "Consejo 2"]} />
25
+      </IonContent>
26
+    </IonPage>
27
+  );
28
+};
29
+
30
+export default AdviceListPage;

+ 51
- 0
src/pages/ArticlePage.tsx Dosyayı Görüntüle

@@ -0,0 +1,51 @@
1
+import {
2
+  IonBackButton,
3
+  IonButtons,
4
+  IonCard,
5
+  IonCardContent,
6
+  IonCardHeader,
7
+  IonCardSubtitle,
8
+  IonCardTitle,
9
+  IonContent,
10
+  IonHeader,
11
+  IonPage,
12
+  IonTitle,
13
+  IonToolbar,
14
+} from "@ionic/react";
15
+import { RouteComponentProps } from "react-router";
16
+
17
+const ArticlePage: React.FC<RouteComponentProps<{ slug: string }>> = ({
18
+  match,
19
+}) => {
20
+  return (
21
+    <IonPage>
22
+      <IonHeader>
23
+        <IonToolbar>
24
+          <IonButtons slot="start">
25
+            <IonBackButton />
26
+          </IonButtons>
27
+          <IonTitle>{match.params.slug}</IonTitle>
28
+        </IonToolbar>
29
+      </IonHeader>
30
+      <IonContent fullscreen>
31
+        <IonCard>
32
+          <img
33
+            alt="Silhouette of mountains"
34
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
35
+          />
36
+          <IonCardHeader>
37
+            <IonCardTitle>{match.params.slug}</IonCardTitle>
38
+            <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
39
+          </IonCardHeader>
40
+
41
+          <IonCardContent>
42
+            Here's a small text description for the card content. Nothing more,
43
+            nothing less.
44
+          </IonCardContent>
45
+        </IonCard>
46
+      </IonContent>
47
+    </IonPage>
48
+  );
49
+};
50
+
51
+export default ArticlePage;

+ 30
- 0
src/pages/LawListPage.tsx Dosyayı Görüntüle

@@ -0,0 +1,30 @@
1
+import {
2
+  IonContent,
3
+  IonHeader,
4
+  IonPage,
5
+  IonTitle,
6
+  IonToolbar,
7
+} from "@ionic/react";
8
+import ListComponent from "../components/ListComponent";
9
+
10
+const LawListPage: React.FC = () => {
11
+  return (
12
+    <IonPage>
13
+      <IonHeader>
14
+        <IonToolbar>
15
+          <IonTitle>Leyes</IonTitle>
16
+        </IonToolbar>
17
+      </IonHeader>
18
+      <IonContent fullscreen>
19
+        <IonHeader collapse="condense">
20
+          <IonToolbar>
21
+            <IonTitle size="large">Leyes</IonTitle>
22
+          </IonToolbar>
23
+        </IonHeader>
24
+        <ListComponent laws={["Law 1", "Law 2"]} />
25
+      </IonContent>
26
+    </IonPage>
27
+  );
28
+};
29
+
30
+export default LawListPage;