Feed and ionic

components/pages/Feed.jsx

@@ -3,8 +3,8 @@ import Card from '../ui/Card';
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/react';
 import { homeItems } from '../../store';
 
-const HomeCard = ({ title, type, text, author, image }) => (
-  <Card className="my-4">
+const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
+  <Card className="my-4 mx-auto">
     <div>
       <img className="rounded-t-xl h-32 w-full object-cover" src={image} />
     </div>
@@ -12,6 +12,10 @@ const HomeCard = ({ title, type, text, author, image }) => (
       <h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">{type}</h4>
       <h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">{title}</h2>
       <p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">{text}</p>
+      <div className="flex items-center space-x-4">
+        <img src={authorAvatar} className="rounded-full w-10 h-10" />
+        <h3 className="text-gray-500 dark:text-gray-200 m-l-8 text-sm font-medium">{author}</h3>
+      </div>
     </div>
   </Card>
 );
@@ -20,12 +24,17 @@ const Home = () => (
   <IonPage>
     <IonHeader>
       <IonToolbar>
-        <IonTitle>Inbox</IonTitle>
+        <IonTitle>Feed</IonTitle>
       </IonToolbar>
     </IonHeader>
-    <IonContent className="ion-padding">
+    <IonContent className="ion-padding" fullscreen>
+      <IonHeader collapse="condense">
+        <IonToolbar>
+          <IonTitle size="large">Feed</IonTitle>
+        </IonToolbar>
+      </IonHeader>
       {homeItems.map((i, index) => (
-        <HomeCard {...i} key={index} />
+        <FeedCard {...i} key={index} />
       ))}
     </IonContent>
   </IonPage>

components/pages/Tabs.jsx

@@ -1,17 +1,9 @@
 import { Redirect, Route } from 'react-router-dom';
-import {
-  IonApp,
-  IonRouterOutlet,
-  IonTabs,
-  IonTabBar,
-  IonTabButton,
-  IonIcon,
-  IonLabel,
-} from '@ionic/react';
+import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
-import { ellipse, square, triangle } from 'ionicons/icons';
+import { cog, flash, list } from 'ionicons/icons';
 
-import Home from './Home';
+import Home from './Feed';
 import Lists from './Lists';
 import Settings from './Settings';
 
@@ -20,23 +12,23 @@ const Tabs = () => {
     <IonReactRouter>
       <IonTabs>
         <IonRouterOutlet>
-          <Route path="/tabs/home" component={Home} exact={true} />
+          <Route path="/tabs/feed" component={Home} exact={true} />
           <Route path="/tabs/lists" component={Lists} exact={true} />
           <Route path="/tabs/settings" component={Settings} exact={true} />
-          <Route path="/" render={() => <Redirect to="/tabs/home" />} exact={true} />
+          <Route path="/tabs" render={() => <Redirect to="/tabs/feed" />} exact={true} />
         </IonRouterOutlet>
         <IonTabBar slot="bottom">
-          <IonTabButton tab="tab1" href="/tabs/home">
-            <IonIcon icon={triangle} />
-            <IonLabel>Tab 1</IonLabel>
+          <IonTabButton tab="tab1" href="/tabs/feed">
+            <IonIcon icon={flash} />
+            <IonLabel>Feed</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab2" href="/tabs/lists">
-            <IonIcon icon={ellipse} />
-            <IonLabel>Tab 2</IonLabel>
+            <IonIcon icon={list} />
+            <IonLabel>Lists</IonLabel>
           </IonTabButton>
           <IonTabButton tab="tab3" href="/tabs/settings">
-            <IonIcon icon={square} />
-            <IonLabel>Tab 3</IonLabel>
+            <IonIcon icon={cog} />
+            <IonLabel>Settings</IonLabel>
           </IonTabButton>
         </IonTabBar>
       </IonTabs>