ironhack-labs · Hayarpi-hz · May 17, 2025
diff --git a/index.html b/index.html
@@ -2,7 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
+      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
+      crossorigin="anonymous"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>

diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,3 @@
-<template>
-  <div class="app">
-    <Tweet />
-  </div>
-</template>
-
 <script setup>
   import { ref } from 'vue';
   import Tweet from './components/Tweet.vue';
@@ -12,7 +6,7 @@
     {
       user: {
         name: "Thoughts of Dog®",
-        image: "https://i.imgur.com/b0EdHVV.jpg",
+        image: "https://cdn.pixabay.com/photo/2017/08/23/11/30/twitter-2672572_1280.jpg",
         handle: "dog_feelings",
       },
       timestamp: "1h ago",
@@ -21,7 +15,7 @@
     {
       user: {
         name: "Thoughts of Dog®",
-        image: "https://i.imgur.com/b0EdHVV.jpg",
+        image: "https://cdn.pixabay.com/photo/2017/08/23/11/30/twitter-2672572_1280.jpg",
         handle: "dog_feelings",
       },
       timestamp: "2h ago",
@@ -30,7 +24,7 @@
     {
       user: {
         name: "Thoughts of Dog®",
-        image: "https://i.imgur.com/b0EdHVV.jpg",
+        image: "https://cdn.pixabay.com/photo/2017/08/23/11/30/twitter-2672572_1280.jpg",
         handle: "dog_feelings",
       },
       timestamp: "3h ago",
@@ -39,6 +33,12 @@
 ]);
 </script>
 
+<template>
+  <div class="app">
+    <Tweet v-for="(tweet, index) in tweets" :key="index" :tweet="tweet" />
+  </div>
+</template>
+
 <style>
   body {
     margin: 0;

diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/Actions.vue b/src/components/Actions.vue
@@ -0,0 +1,16 @@
+<script setup>
+
+</script>
+
+<template>
+ <div class="actions">
+    <i class="far fa-comment"></i>
+    <i class="fas fa-retweet"></i>
+    <i class="far fa-heart"></i>
+    <i class="fas fa-share"></i>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Message.vue b/src/components/Message.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  message: String,
+});
+</script>
+
+<template>
+ <p class="message">{{ props.message }}</p>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ProfileImage.vue b/src/components/ProfileImage.vue
@@ -0,0 +1,11 @@
+<script setup>
+const props = defineProps({
+  image: String,
+});
+</script>
+
+<template>
+  <img :src="props.image" class="profile" alt="Profile Image" />
+</template>
+
+<style scoped></style>
diff --git a/src/components/Timestamp.vue b/src/components/Timestamp.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  time: String,
+});
+</script>
+
+<template>
+ <span class="timestamp">{{ props.time }}</span>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Tweet.vue b/src/components/Tweet.vue
@@ -1,33 +1,30 @@
+<script setup>
+import ProfileImage from "./ProfileImage.vue";
+import User from "./User.vue";
+import Timestamp from "./Timestamp.vue";
+import Message from "./Message.vue";
+import Actions from "./Actions.vue";
+
+const props = defineProps({
+  tweet: Object,
+});
+</script>
+
 <template>
   <div class="tweet">
-    <img
-      src="https://i.imgur.com/9yw1Fyw.jpg"
-      class="profile"
-      alt="profile"
-    />
+    <ProfileImage :image="props.tweet.user.image" />
 
     <div class="body">
       <div class="top">
-        <span class="user">
-          <span class="name">Ironhack</span>
-          <span class="handle">@ironhack</span>
-        </span>
-
-        <span class="timestamp">Nov 30, 2020</span>
+        <User :userData="tweet.user" />
+        <Timestamp :time="tweet.timestamp" />
       </div>
 
       <p class="message">
-        On December 7th, we will be hosting a #webinar that will introduce you
-        to #SQL! Are you ready? 🚀
+        <Message :message="tweet.message" />
       </p>
 
-      <div class="actions">
-        <!-- Font Awesome icons -->
-        <i class="far fa-comment"></i>
-        <i class="fas fa-retweet"></i>
-        <i class="far fa-heart"></i>
-        <i class="fas fa-share"></i>
-      </div>
+      <Actions />
     </div>
 
     <i class="fas fa-ellipsis-h"></i>

diff --git a/src/components/User.vue b/src/components/User.vue
@@ -0,0 +1,14 @@
+<script setup>
+const props = defineProps({
+  userData: Object,
+});
+</script>
+
+<template>
+  <span class="user">
+    <span class="name">{{ props.userData.name }}</span>
+    <span class="handle">@{{ props.userData.handle }}</span>
+  </span>
+</template>
+
+<style scoped></style>
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
+
 createApp(App).mount('#app')