Create Tweet component

app/src/app/app.module.ts

@@ -15,6 +15,10 @@ import { SettingsPage } from '../pages/settings/settings';
 import { LoginPage } from '../pages/login/login';
 import { TwitterApiProvider } from '../providers/twitter-api/twitter-api';
 import { FeedComponent } from '../components/feed/feed';
+import { TweetComponent } from '../components/tweet/tweet';
+import { TweetHeaderComponent } from '../components/tweet-header/tweet-header';
+import { TweetBodyComponent } from '../components/tweet-body/tweet-body';
+import { TweetActionsComponent } from '../components/tweet-actions/tweet-actions';
 
 @NgModule({
   declarations: [
@@ -23,7 +27,11 @@ import { FeedComponent } from '../components/feed/feed';
     SearchPage,
     SettingsPage,
     LoginPage,
-    FeedComponent
+    FeedComponent,
+    TweetComponent,
+    TweetHeaderComponent,
+    TweetBodyComponent,
+    TweetActionsComponent
   ],
   imports: [
     BrowserModule,

app/src/components/components.module.ts

@@ -1,8 +1,20 @@
 import { NgModule } from '@angular/core';
 import { FeedComponent } from './feed/feed';
+import { TweetComponent } from './tweet/tweet';
+import { TweetHeaderComponent } from './tweet-header/tweet-header';
+import { TweetBodyComponent } from './tweet-body/tweet-body';
+import { TweetActionsComponent } from './tweet-actions/tweet-actions';
 @NgModule({
-	declarations: [FeedComponent],
+	declarations: [FeedComponent,
+    TweetComponent,
+    TweetHeaderComponent,
+    TweetBodyComponent,
+    TweetActionsComponent],
 	imports: [],
-	exports: [FeedComponent]
+	exports: [FeedComponent,
+    TweetComponent,
+    TweetHeaderComponent,
+    TweetBodyComponent,
+    TweetActionsComponent]
 })
 export class ComponentsModule {}

app/src/components/feed/feed.html

@@ -1,5 +1,5 @@
 <ion-content fullscreen>
   <ion-list>
-    <ion-item *ngFor="let tweet of data">{{ tweet.text }}</ion-item>
+    <tweet *ngFor="let tweet of data" [data]="tweet"></tweet>
   </ion-list>
 </ion-content>

app/src/components/tweet-actions/tweet-actions.html

@@ -0,0 +1,14 @@
+<!-- Generated template for the TweetActionsComponent component -->
+<div class="actions-container">
+  <div class="comments">
+    <ion-icon name="ios-chatbubbles-outline"></ion-icon>
+  </div>
+  <div class="retweets">
+    <ion-icon name="ios-git-compare-outline"></ion-icon>
+    <span>{{ data.retweet_count }}</span>
+  </div>
+  <div class="likes">
+    <ion-icon name="ios-heart-outline"></ion-icon>
+    <span>{{ data.favorite_count }}</span>
+  </div>
+</div>

app/src/components/tweet-actions/tweet-actions.scss

@@ -0,0 +1,23 @@
+tweet-actions {
+    .actions-container {
+        display: flex;
+        flex-direction: row;
+
+        div {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            flex-grow: 1;
+            text-align: center;
+            margin-top: 8px;
+
+            span {
+                margin-left: 5px;
+                font-size: 12px;
+                font-weight: 300;
+                color: #333;
+            }
+        }
+    }
+}

app/src/components/tweet-actions/tweet-actions.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Generated class for the TweetActionsComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'tweet-actions',
+  templateUrl: 'tweet-actions.html'
+})
+export class TweetActionsComponent {
+
+  @Input() data: any[];
+
+  constructor() { }
+
+}

app/src/components/tweet-body/tweet-body.html

@@ -0,0 +1,4 @@
+<!-- Generated template for the TweetBodyComponent component -->
+<div>
+  <p>{{ body }}</p>
+</div>

app/src/components/tweet-body/tweet-body.scss

@@ -0,0 +1,3 @@
+tweet-body {
+
+}

app/src/components/tweet-body/tweet-body.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Generated class for the TweetBodyComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'tweet-body',
+  templateUrl: 'tweet-body.html'
+})
+export class TweetBodyComponent {
+
+  @Input() body: any[];
+
+  constructor() {}
+
+}

app/src/components/tweet-header/tweet-header.html

@@ -0,0 +1,9 @@
+<!-- Generated template for the TweetHeaderComponent component -->
+<div class="header-container">
+  <img src="{{ user.profile_image_url_https }}" alt="{{ user.name }}" class="avatar">
+  <div class="username">
+      {{ user.name }}
+      <span class="twitter-handle">@{{user.screen_name}}</span>
+  </div>
+  <div class="timestamp">{{ tweetCreatedAt }}</div>
+</div>

app/src/components/tweet-header/tweet-header.scss

@@ -0,0 +1,35 @@
+tweet-header {
+    .header-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 4px;
+    }
+
+    .avatar {
+        border-radius: 50%;
+        width: 32px;
+        height: 32px;
+        box-shadow: 0px 0px 4px 0px #777;
+        margin: 4px 8px 4px 4px;
+    }
+
+    .username {
+        display: flex;
+        flex-direction: column;
+        font-size: 13px;
+        font-weight: 500;
+        .twitter-handle {
+            color: #aaa;
+            font-size: 10px;
+            font-weight: 400;
+        }
+    }
+
+    .timestamp {
+        color: #aaa;
+        font-size: 10px;
+        margin-left: auto;
+        align-self: flex-start;
+    }
+}

app/src/components/tweet-header/tweet-header.ts

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Generated class for the TweetHeaderComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'tweet-header',
+  templateUrl: 'tweet-header.html'
+})
+export class TweetHeaderComponent {
+  @Input() user: any[];
+  @Input() tweetCreatedAt: string;
+
+  constructor() {}
+}

app/src/components/tweet/tweet.html

@@ -0,0 +1,5 @@
+<ion-item text-wrap>
+  <tweet-header [user]="data.user" [tweetCreatedAt]="data.created_at"></tweet-header>
+  <tweet-body [body]="data.text"></tweet-body>
+  <tweet-actions [data]="data"></tweet-actions>
+</ion-item>

app/src/components/tweet/tweet.scss

@@ -0,0 +1,3 @@
+tweet {
+
+}

app/src/components/tweet/tweet.ts

@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core';
+
+/**
+ * Generated class for the TweetComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'tweet',
+  templateUrl: 'tweet.html'
+})
+export class TweetComponent {
+
+  @Input() data: any[];
+
+  constructor() {}
+
+}