Feed and ionic

capacitor.config.json

@@ -9,5 +9,8 @@
       "launchShowDuration": 0
     }
   },
+  "server": {
+    "url": "http://192.168.86.26:3000"
+  },
   "cordova": {}
 }

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>

ios/App/App/capacitor.config.json

@@ -9,5 +9,8 @@
       "launchShowDuration": 0
     }
   },
+  "server": {
+    "url": "http://192.168.86.26:3000"
+  },
   "cordova": {}
 }

store/index.js

@@ -3,33 +3,36 @@ import { Store as PullStateStore } from 'pullstate';
 import { lists } from '../mock';
 
 export const images = [
-  'https://images.unsplash.com/photo-1608091526083-86ae8489ae5c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
-  'https://images.unsplash.com/photo-1608050072262-7b26ba63fb46?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
-  'https://images.unsplash.com/photo-1607975218223-94f82613e833?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80',
-  'https://images.unsplash.com/photo-1608108707326-215150457c9f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80',
-  'https://images.unsplash.com/photo-1608057681073-9399f209e773?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80',
+  'https://images.unsplash.com/photo-1610235554447-41505d7962f8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=882&q=80',
+  'https://images.unsplash.com/photo-1610212594948-370947a3ba0b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80',
+  'https://images.unsplash.com/photo-1610155180433-9994da6a323b?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
 ];
 
 export const homeItems = [
   {
-    title: 'Welcome',
+    title: 'Exploring Maui',
     type: 'Blog',
-    text: 'Welcome to the app!',
-    author: 'Max',
+    text: 'We just got back from a trip to Maui, and we had a great time...',
+    author: 'Max Lynch',
+    authorAvatar: '/img/max.jpg',
     image: images[0],
   },
   {
-    title: 'How to get started',
-    type: 'Article',
-    text: 'Getting started with the app is easy! Just follow these 100 steps',
-    author: 'Max',
+    title: 'Arctic Adventures',
+    type: 'Blog',
+    text:
+      'Last month we took a trek to the Arctic Circle. The isolation was just what we needed after...',
+    author: 'Max Lynch',
+    authorAvatar: '/img/max.jpg',
     image: images[1],
   },
   {
-    title: 'Need help?',
-    type: 'Support',
-    text: "We're here to help. Available between the hours of 3am and 3:01am every day",
-    author: 'Max',
+    title: 'Frolicking in the Faroe Islands',
+    type: 'Blog',
+    text:
+      'The Faroe Islands are a North Atlantic archipelago located 320 kilometres (200 mi) north-northwest of Scotland...',
+    author: 'Max Lynch',
+    authorAvatar: '/img/max.jpg',
     image: images[2],
   },
 ];