feat: init author layout

Author: anoop-b

src/templates/author.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import PropTypes from "prop-types";
 import { graphql } from "gatsby";
 
-import { Layout, PostCard, Pagination } from "../components/common";
+import { Layout, PostCardBlog, Pagination } from "../components/common";
 import { MetaData } from "../components/common/meta";
 
 /**
@@ -25,57 +25,21 @@ const Author = ({ data, location, pageContext }) => {
     <>
       <MetaData data={data} location={location} type="profile" />
       <Layout>
-        <div className="container">
-          <header className="author-header">
-            <div className="author-header-content">
+        <div>
+          <div className="bg-bg-black py-8 text-white mx-auto">
+            <h1 className="text-4xl md:text-5xl ml-4 font-semibold md:mx-auto max-w-3xl">
               <h1>{author.name}</h1>
-              {author.bio && <p>{author.bio}</p>}
-              <div className="author-header-meta">
-                {author.website && (
-                  <a
-                    className="author-header-item"
-                    href={author.website}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Website
-                  </a>
-                )}
-                {twitterUrl && (
-                  <a
-                    className="author-header-item"
-                    href={twitterUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Twitter
-                  </a>
-                )}
-                {facebookUrl && (
-                  <a
-                    className="author-header-item"
-                    href={facebookUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Facebook
-                  </a>
-                )}
-              </div>
-            </div>
-            <div className="author-header-image">
-              {author.profile_image && (
-                <img src={author.profile_image} alt={author.name} />
-              )}
-            </div>
-          </header>
-          <section className="post-feed">
-            {posts.map(({ node }) => (
-              // The tag below includes the markup for each post - components/common/PostCard.js
-              <PostCard key={node.id} post={node} />
-            ))}
-          </section>
-          <Pagination pageContext={pageContext} />
+            </h1>
+          </div>
+          <div className="post-container">
+            <section className="post-feed max-w-3xl mx-auto">
+              {posts.map(({ node }) => (
+                // The tag below includes the markup for each post - components/common/PostCard.js
+                <PostCardBlog key={node.id} post={node} />
+              ))}
+            </section>
+            <Pagination pageContext={pageContext} />
+          </div>
         </div>
       </Layout>
     </>