Added Search Bar functionality to Capsules list.

src/components/SearchBar.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { IonItem, IonList, IonSearchbar } from '@ionic/react';
+
+function SearchBar() {
+  const data = ['Breve Historia del baile en Puerto Rico', 'Cápsula#2', 'Cápsula#3'];
+  let [results, setResults] = useState([...data]);
+
+  const handleChange = (ev: Event) => {
+    let query = "";
+    const target = ev.target as HTMLIonSearchbarElement;
+    if (target) query = target.value!.toLowerCase();
+
+    setResults(data.filter(d => d.toLowerCase().indexOf(query) > -1));
+  }
+
+  return (
+    <>
+      <IonSearchbar debounce={1000} onIonChange={(ev) => handleChange(ev)}></IonSearchbar>
+
+      <IonList inset={true}>
+        { results.map(result => (
+          <IonItem>{ result }</IonItem>
+        ))}
+      </IonList>
+    </>
+  );
+}
+export default SearchBar;

src/pages/ListCapsules.tsx

@@ -1,15 +1,10 @@
 import {
-  IonList,
-  IonItem,
-  IonLabel,
   IonImg,
-  IonSearchbar,
   IonContent,
   IonHeader,
   IonPage,
   IonTitle,
   IonToolbar,
-  IonButton,
   IonNavLink,
   IonFooter,
   IonTabButton,
@@ -21,8 +16,9 @@ import {
 import { arrowBack } from 'ionicons/icons';
 import './ListCapsules.css';
 import HomePage from './HomePage';
-import Capsule from './Capsule'
+// import Capsule from './Capsule'
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
+import SearchBar from '../components/SearchBar';
 
 const ListCapsules: React.FC = () => {
   return (
@@ -42,21 +38,7 @@ const ListCapsules: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonSearchbar></IonSearchbar>
-        <IonList inset={true}>
-          <IonItem>
-            <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
-              <IonButton>Visitar</IonButton>
-            </IonNavLink>
-          </IonItem>
-          <IonItem>
-            <IonLabel>Cápsula#2</IonLabel>
-          </IonItem>
-          <IonItem>
-            <IonLabel>Cápsula#3</IonLabel>
-          </IonItem>
-        </IonList>
+      <SearchBar></SearchBar>
       </IonContent>
       <IonFooter>
         <IonToolbar>