Basic components added with basic styling

apps/comments-ui/public/main.css

@@ -564,10 +564,58 @@ video {
   margin-top: 0.8rem;
 }
 
+.mb-4 {
+  margin-bottom: 1.6rem;
+}
+
+.mb-3 {
+  margin-bottom: 1.2rem;
+}
+
+.mb-8 {
+  margin-bottom: 3.2rem;
+}
+
+.mr-4 {
+  margin-right: 1.6rem;
+}
+
+.mr-2 {
+  margin-right: 0.8rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.4rem;
+}
+
+.flex {
+  display: flex;
+}
+
 .w-full {
   width: 100%;
 }
 
+.resize-none {
+  resize: none;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -585,19 +633,99 @@ video {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
+.p-8 {
+  padding: 3.2rem;
+}
+
 .p-2 {
   padding: 0.8rem;
 }
 
+.p-4 {
+  padding: 1.6rem;
+}
+
+.p-3 {
+  padding: 1.2rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.font-sans {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
 .text-md {
   font-size: 1.5rem;
 }
 
+.text-xl {
+  font-size: 2rem;
+}
+
+.text-2xl {
+  font-size: 2.4rem;
+}
+
+.text-sm {
+  font-size: 1.4rem;
+}
+
+.text-lg {
+  font-size: 1.8rem;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.leading-5 {
+  line-height: 1.25rem;
+}
+
+.leading-normal {
+  line-height: 1.5;
+}
+
+.leading-snug {
+  line-height: 1.375;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
 .filter {
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

apps/comments-ui/src/components/Avatar.js

@@ -0,0 +1,9 @@
+function Avatar() {
+    return (
+        <div class="avatar">
+            <p>JW</p>
+        </div>
+    );
+}
+  
+export default Avatar;

apps/comments-ui/src/components/Comment.js

@@ -0,0 +1,31 @@
+import Avatar from './Avatar';
+import Like from './Like';
+import Reply from './Reply';
+import More from './More';
+
+function Comment() {
+    return (
+        <div className="mb-8">
+            <div className="flex justify-between items-end mb-3">
+                <div>
+                    <Avatar />
+                    <h4 className="text-lg font-sans font-semibold mb-1">Someone's Name</h4>
+                    <h6 className="text-sm text-gray-400 font-sans">Someone's Bio</h6>
+                </div>
+                <div className="text-sm text-gray-400 font-sans font-normal">
+                    2 mins ago
+                </div>
+            </div>
+            <div className="mb-4 font-sans leading-normal">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis erat vitae diam gravida accumsan vitae quis nisl. Donec luctus laoreet mauris, nec posuere turpis accumsan in. Proin sagittis magna quis vulputate tempus. Duis sagittis purus mattis enim condimentum, quis tempus est tristique.</p>
+            </div>
+            <div className="flex">
+                <Like />
+                <Reply />
+                <More />
+            </div>
+        </div>
+    );
+}
+  
+export default Comment;

apps/comments-ui/src/components/Form.js

@@ -1,5 +1,8 @@
 import React from 'react';
 import AppContext from '../AppContext';
+import TotalComments from './TotalComments';
+import Comment from './Comment';
+import Pagination from './Pagination';
 
 class Form extends React.Component {
     static contextType = AppContext;
@@ -58,25 +61,35 @@ class Form extends React.Component {
     render() {
         return (
             <form onSubmit={this.submitForm} className="comment-form">
-                <div>
-                    <figure>
-                        <div>
-                            { this.getInitials() }
-                        </div>
-                        { this.context.member ? <img src={this.context.member.avatar_image} width="60" height="60" alt="Avatar"/> : '' }
-                    </figure>
-                    <div>
-                        <div>
-                            {this.context.member ? this.context.member.name : ''}
-                        </div>
-                        <span>
-                            Add a bio
-                        </span>
-                    </div>
+                <div className="flex justify-between items-center mb-3">
+                    <h1 className="text-2xl font-sans font-medium">Members discussion</h1>
+                    <TotalComments />
+                </div>
+                <Pagination />
+                <div>
+                    <Comment />
+                    <Comment />
+                </div>
+                <div>
+                    <div>
+                        <figure>
+                            <div>
+                                { this.getInitials() }
+                            </div>
+                            { this.context.member ? <img src={this.context.member.avatar_image} width="60" height="60" alt="Avatar"/> : '' }
+                        </figure>
+                        <div>
+                            <div>
+                                {this.context.member ? this.context.member.name : ''}
+                            </div>
+                            <span>
+                                Add a bio
+                            </span>
+                        </div>
+                    </div>
+                    <textarea className="w-full resize-none rounded-md border p-2 font-sans" value={this.state.message} onChange={this.handleChange} placeholder="What are your thoughts?" />
+                    <button type="submit" className="bg-black p-2 text-white rounded w-full mt-2 text-md font-sans">Comment</button>
                 </div>
-
-                <textarea className="w-full rounded-md border p-2" value={this.state.message} onChange={this.handleChange} placeholder="What are your thoughts?" />
-                <button type="submit" className="bg-black p-2 text-white rounded w-full mt-2 text-md">Comment</button>
             </form>
         );
     }

apps/comments-ui/src/components/Like.js

@@ -0,0 +1,9 @@
+function Like() {
+    return (
+        <div className="mr-4 text-gray-400 font-sans">
+            4 Likes
+        </div>
+    );
+}
+  
+export default Like;

apps/comments-ui/src/components/More.js

@@ -0,0 +1,9 @@
+function More() {
+    return (
+        <div className="text-gray-400 font-sans">
+            More
+        </div>
+    );
+}
+  
+export default More;

apps/comments-ui/src/components/Pagination.js

@@ -0,0 +1,9 @@
+function Pagination() {
+    return (
+        <div className="w-full rounded-md border p-3 mb-3 font-sans text-sm text-center">
+            Show 32 more comments
+        </div>
+    );
+}
+  
+export default Pagination;

apps/comments-ui/src/components/Reply.js

@@ -0,0 +1,9 @@
+function Reply() {
+    return (
+        <div className="mr-4 text-gray-400 font-sans">
+            Reply
+        </div>
+    );
+}
+  
+export default Reply;

apps/comments-ui/src/components/TotalComments.js

@@ -0,0 +1,9 @@
+function TotalComments() {
+    return (
+        <section className="font-sans text-base text-gray-400">
+            <p>99 comments</p>
+        </section>
+    );
+}
+  
+export default TotalComments;