[feat] Add Article, Advice, Law screens

src/App.tsx

@@ -10,7 +10,7 @@ import {
   setupIonicReact,
 } from "@ionic/react";
 import { IonReactRouter } from "@ionic/react-router";
-import { ellipse, square, triangle } from "ionicons/icons";
+import { ellipse, home } from "ionicons/icons";
 import Home from "./pages/Home";
 
 /* Core CSS required for Ionic components to work properly */
@@ -31,6 +31,9 @@ import "@ionic/react/css/display.css";
 
 /* Theme variables */
 import "./theme/variables.css";
+import AdviceListPage from "./pages/AdviceListPage";
+import LawListPage from "./pages/LawListPage";
+import ArticlePage from "./pages/ArticlePage";
 
 setupIonicReact();
 
@@ -42,22 +45,29 @@ const App: React.FC = () => (
           <Route exact path="/home">
             <Home />
           </Route>
+          <Route path="/advice">
+            <AdviceListPage />
+          </Route>
+          <Route path="/laws">
+            <LawListPage />
+          </Route>
+          <Route path="/article/:slug" component={ArticlePage} />
           <Route exact path="/">
             <Redirect to="/home" />
           </Route>
         </IonRouterOutlet>
         <IonTabBar slot="bottom">
-          <IonTabButton tab="tab1" href="/tab1">
-            <IonIcon icon={triangle} />
-            <IonLabel>Tab 1</IonLabel>
+          <IonTabButton tab="home" href="/home">
+            <IonIcon icon={home} />
+            <IonLabel>Home</IonLabel>
           </IonTabButton>
-          <IonTabButton tab="tab2" href="/tab2">
+          <IonTabButton tab="advice" href="/advice">
             <IonIcon icon={ellipse} />
-            <IonLabel>Tab 2</IonLabel>
+            <IonLabel>Advice</IonLabel>
           </IonTabButton>
-          <IonTabButton tab="tab3" href="/tab3">
-            <IonIcon icon={square} />
-            <IonLabel>Tab 3</IonLabel>
+          <IonTabButton tab="laws" href="/laws">
+            <IonIcon icon={ellipse} />
+            <IonLabel>Laws</IonLabel>
           </IonTabButton>
         </IonTabBar>
       </IonTabs>

src/pages/AdviceListPage.tsx

@@ -0,0 +1,30 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import ListComponent from "../components/ListComponent";
+
+const AdviceListPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Consejos</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Consejos</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ListComponent laws={["Consejo 1", "Consejo 2"]} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AdviceListPage;

src/pages/ArticlePage.tsx

@@ -0,0 +1,51 @@
+import {
+  IonBackButton,
+  IonButtons,
+  IonCard,
+  IonCardContent,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import { RouteComponentProps } from "react-router";
+
+const ArticlePage: React.FC<RouteComponentProps<{ slug: string }>> = ({
+  match,
+}) => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton />
+          </IonButtons>
+          <IonTitle>{match.params.slug}</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonCard>
+          <img
+            alt="Silhouette of mountains"
+            src="https://ionicframework.com/docs/img/demos/card-media.png"
+          />
+          <IonCardHeader>
+            <IonCardTitle>{match.params.slug}</IonCardTitle>
+            <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
+          </IonCardHeader>
+
+          <IonCardContent>
+            Here's a small text description for the card content. Nothing more,
+            nothing less.
+          </IonCardContent>
+        </IonCard>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default ArticlePage;

src/pages/LawListPage.tsx

@@ -0,0 +1,30 @@
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/react";
+import ListComponent from "../components/ListComponent";
+
+const LawListPage: React.FC = () => {
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Leyes</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Leyes</IonTitle>
+          </IonToolbar>
+        </IonHeader>
+        <ListComponent laws={["Law 1", "Law 2"]} />
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default LawListPage;