Issue #4 Comentarios falsos

src/components/Comments.jsx

@@ -1,10 +1,48 @@
 import React from "react";
+import {FaThumbsUp, FaThumbsDown, FaLaughSquint} from 'react-icons/fa';
+
+import Faker from 'faker';
+
+import './Comments.scss'
+
+const Comment = (props) => (
+  <div class='comment'>
+    <div class='avatar-container'>
+      <img className='avatar' src={props.avatar} alt='Avatar'/>
+    </div>
+    <div className='body'>
+      <span className='username'>{props.user}</span>
+      <p>{props.text}</p>
+      <div class='buttons'>
+        <button><FaThumbsUp/></button>
+        <button><FaThumbsDown/></button>
+        <button><FaLaughSquint/></button>
+      </div>
+    </div>
+  </div>
+)
 
 export const Comments = (props) => {
+  let comentarios = [];
+
+  let comment_count = Math.floor(Math.random() * 20)
+
+  for(let i = 0; i < comment_count; i++){
+    comentarios.push({
+      user: Faker.internet.userName(),
+      avatar: Faker.internet.avatar(),
+      text: Faker.lorem.paragraph(20)
+    });
+  }
+
+  comentarios = comentarios.map((comentario, index) => (
+    <Comment key={index} user={comentario.user} avatar={comentario.avatar} text={comentario.text}/>
+  ));
+
   return (
-    <div>
-      <h3>Comentarios</h3>
-      <p>No aun :3</p>
+    <div className='comments'>
+      <h2>Comentarios</h2>
+      {comentarios}
     </div>
   )
 }

src/components/Comments.scss

@@ -0,0 +1,42 @@
+.comments {
+  .comment {
+    display: flex;
+    padding-bottom: 1em;
+    margin-top: 1em;
+    border-bottom: var(--line-width) solid var(--accent);
+
+    .avatar-container {
+      flex-shrink: 0;
+      width: 75px;
+      height: 75px;
+      margin-right: 1em;
+      outline: 1px var(--gray-2) solid;
+
+      .avatar {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+      }
+
+    }
+
+    .body {
+      .username {
+        font-weight: 500;
+      }
+      p {
+      }
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: row;
+
+      button {
+        border: none;
+        padding: 0 1em;
+        background-color: transparent;
+      }
+    }
+  }
+}