done

src/App.vue

@@ -1,41 +1,46 @@
 <template>
   <div class="app">
-    <Tweet />
+    <!-- Recorremos el array tweets y renderizamos un Tweet por cada objeto -->
+    <Tweet
+      v-for="(tweet, index) in tweets"
+      :key="index"
+      :tweet="tweet"
+    />
   </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue';
-  import Tweet from './components/Tweet.vue';
-
-  const tweets = ref([
-    {
-      user: {
-        name: "Thoughts of Dog®",
-        image: "https://i.imgur.com/b0EdHVV.jpg",
-        handle: "dog_feelings",
-      },
-      timestamp: "1h ago",
-      message: "the human likes to say. that i live here rent free. but i would argue. this housing accommodation. is my payment. for a lifetime of love. and excellent company",
+import { ref } from 'vue';
+import Tweet from './components/Tweet.vue';
+
+const tweets = ref([
+  {
+    user: {
+      name: "Thoughts of Dog®",
+      image: "https://i.imgur.com/b0EdHVV.jpg",
+      handle: "dog_feelings",
     },
-    {
-      user: {
-        name: "Thoughts of Dog®",
-        image: "https://i.imgur.com/b0EdHVV.jpg",
-        handle: "dog_feelings",
-      },
-      timestamp: "2h ago",
-      message: "sometimes. the human presses their noggin against mine. to figure out what i’m thinking. so i just think really hard. about how much i love them. and hope they figure it out",
+    timestamp: "1h ago",
+    message: "the human likes to say. that i live here rent free. but i would argue. this housing accommodation. is my payment. for a lifetime of love. and excellent company",
+  },
+  {
+    user: {
+      name: "Thoughts of Dog®",
+      image: "https://i.imgur.com/b0EdHVV.jpg",
+      handle: "dog_feelings",
     },
-    {
-      user: {
-        name: "Thoughts of Dog®",
-        image: "https://i.imgur.com/b0EdHVV.jpg",
-        handle: "dog_feelings",
-      },
-      timestamp: "3h ago",
-      message: "here is what. i plan to accomplish today: \n\n2. bark loudly. but at nothing \n7. lose my ball under the couch\n7b. politely ask the human. to get my ball\n3. immediately lose it again. under the same couch\n4. big nap. you have worked hard\n2. repeat",
-    }
+    timestamp: "2h ago",
+    message: "sometimes. the human presses their noggin against mine. to figure out what i’m thinking. so i just think really hard. about how much i love them. and hope they figure it out",
+  },
+  {
+    user: {
+      name: "Thoughts of Dog®",
+      image: "https://i.imgur.com/b0EdHVV.jpg",
+      handle: "dog_feelings",
+    },
+    timestamp: "3h ago",
+    message: "here is what. i plan to accomplish today: \n\n2. bark loudly. but at nothing \n7. lose my ball under the couch\n7b. politely ask the human. to get my ball\n3. immediately lose it again. under the same couch\n4. big nap. you have worked hard\n2. repeat",
+  }
 ]);
 </script>
 

src/components/Actions.vue

@@ -0,0 +1,14 @@
+<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>
+
+<script setup>
+
+</script>
+
+

src/components/Message.vue

@@ -0,0 +1,11 @@
+<template>
+  <p class="message">{{ message }}</p>
+</template>
+
+<script setup>
+defineProps({
+  message: String
+});
+</script>
+
+

src/components/ProfileImage.vue

@@ -0,0 +1,10 @@
+<template>
+  <img :src="image" class="profile" alt="profile" />
+</template>
+
+<script setup>
+defineProps({
+  image: String
+});
+</script>
+

src/components/Timestamp.vue

@@ -0,0 +1,10 @@
+<template>
+  <span class="timestamp">{{ time }}</span>
+</template>
+
+<script setup>
+defineProps({
+  time: String
+});
+</script>
+

src/components/Tweet.vue

@@ -1,41 +1,37 @@
 <template>
   <div class="tweet">
-    <img
-      src="https://i.imgur.com/9yw1Fyw.jpg"
-      class="profile"
-      alt="profile"
-    />
+    <ProfileImage :image="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? 🚀
-      </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>
+      <Message :message="tweet.message" />
+      <Actions />
     </div>
 
     <i class="fas fa-ellipsis-h"></i>
   </div>
 </template>
 
+<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';
+
+defineProps({
+  tweet: Object
+});
+</script>
+
 <style scoped>
 a {
   color: #42b983;
 }
 </style>
+
+

src/components/User.vue

@@ -0,0 +1,13 @@
+<template>
+  <span class="user">
+    <span class="name">{{ userData.name }}</span>
+    <span class="handle">@{{ userData.handle }}</span>
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  userData: Object
+});
+</script>
+