3: Styling React Components

Author: Amir Ghezelbash

src/components/App/App.module.css

@@ -0,0 +1,13 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.title {
+  color: #294e80;
+}
+
+.postsWrapper {
+  width: 270px;
+}

src/components/App/App.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 
-interface Post {
-  title: string;
-  description: string;
-  author: string;
-  isPublished: boolean;
-}
+import Post, { PostProps } from "../post/Post";
+import classNames from "./App.module.css";
 
-const posts: Post[] = [
+const posts: PostProps[] = [
   {
     title: "example post",
     description: "some text",
@@ -30,17 +26,11 @@ const posts: Post[] = [
 
 const App: React.FC = () => {
   return (
-    <div>
-      <h1>Hello typescript tv!</h1>
-      <div>
+    <div className={classNames.wrapper}>
+      <h1 className={classNames.title}>Hello typescript tv!</h1>
+      <div className={classNames.postsWrapper}>
         {posts.map((post) => (
-          <div key={post.title}>
-            <p>title: {post.title}</p>
-            <p>description: {post.description}</p>
-            <p>author: {post.author}</p>
-            <p>isPublished: {post.isPublished ? "True" : "False"}</p>
-            <hr />
-          </div>
+          <Post key={post.title} {...post} />
         ))}
       </div>
     </div>

src/components/post/Post.module.css

@@ -0,0 +1,15 @@
+.title {
+  color: red;
+}
+
+.description {
+  color: purple;
+}
+
+.author {
+  color: orange;
+}
+
+.isPublished {
+  color: blue;
+}

src/components/post/Post.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import classNames from "./Post.module.css";
+
+export interface PostProps {
+  title: string;
+  description: string;
+  author: string;
+  isPublished: boolean;
+}
+
+const Post: React.FC<PostProps> = ({
+  title,
+  description,
+  author,
+  isPublished,
+}) => {
+  return (
+    <div key={title}>
+      <p className={classNames.title}>title: {title}</p>
+      <p className={classNames.description}>description: {description}</p>
+      <p className={classNames.author}>author: {author}</p>
+      <p className={classNames.isPublished}>
+        isPublished: {isPublished ? "True" : "False"}
+      </p>
+      <hr />
+    </div>
+  );
+};
+
+export default Post;