Add cards to blog and team pages

Author: itsamoreh

pages/blog/[[...slug]].js

@@ -1,13 +1,14 @@
+import getArchivePosts from '@/api/frontend/wp/archive/getArchivePosts'
+import postComment from '@/api/frontend/wp/comments/postComment'
 import getPostTypeStaticPaths from '@/api/wordpress/_global/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticProps'
+import Button from '@/components/atoms/Button'
+import Text from '@/components/atoms/Inputs/Text'
 import Layout from '@/components/common/Layout'
-import Link from 'next/link'
-import getArchivePosts from '@/api/frontend/wp/archive/getArchivePosts'
-import postComment from '@/api/frontend/wp/comments/postComment'
-import getPagePropTypes from '@/functions/getPagePropTypes'
 import Blocks from '@/components/molecules/Blocks'
+import Card from '@/components/molecules/Card'
 import Form from '@/components/molecules/Form'
-import Text from '@/components/atoms/Inputs/Text'
+import getPagePropTypes from '@/functions/getPagePropTypes'
 import * as Yup from 'yup'
 
 // Define route post type.
@@ -38,28 +39,28 @@ export default function BlogPost({post, archive, posts, pagination}) {
   if (archive) {
     return (
       <Layout seo={{...post?.seo}}>
-        <div className="container py-20">
-          <section>
-            {!posts || !posts.length ? (
-              <p>No posts found.</p>
-            ) : (
-              posts.map((post, index) => (
-                <article key={index}>
-                  <Link href={post?.uri}>
-                    <a>
-                      <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
-                    </a>
-                  </Link>
-                  <div dangerouslySetInnerHTML={{__html: post?.excerpt}} />
-                </article>
-              ))
-            )}
-            {/* TODO: replace this with a component. */}
-            <button onClick={loadPosts} disabled={!pagination.hasNextPage}>
-              Load more
-            </button>
-          </section>
-        </div>
+        <section className="container py-20">
+          {!posts || !posts.length ? (
+            <p>No posts found.</p>
+          ) : (
+            <div className="w-1/3 grid grid-cols-1 gap-12">
+              {posts.map((post, index) => (
+                <Card
+                  key={index}
+                  title={post?.title}
+                  url={post?.uri}
+                  body={post?.excerpt}
+                />
+              ))}
+            </div>
+          )}
+          <Button
+            onClick={() => loadPosts}
+            text="Load More"
+            type="secondary"
+            disabled={!pagination.hasNextPage}
+          />
+        </section>
       </Layout>
     )
   }

pages/team/[[...slug]].js

@@ -1,10 +1,11 @@
+import getArchivePosts from '@/api/frontend/wp/archive/getArchivePosts'
 import getPostTypeStaticPaths from '@/api/wordpress/_global/getPostTypeStaticPaths'
 import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticProps'
+import Button from '@/components/atoms/Button'
 import Layout from '@/components/common/Layout'
-import Link from 'next/link'
-import getArchivePosts from '@/api/frontend/wp/archive/getArchivePosts'
-import getPagePropTypes from '@/functions/getPagePropTypes'
 import Blocks from '@/components/molecules/Blocks'
+import Card from '@/components/molecules/Card'
+import getPagePropTypes from '@/functions/getPagePropTypes'
 
 // Define route post type.
 const postType = 'team'
@@ -34,28 +35,28 @@ export default function Team({post, archive, posts, pagination}) {
   if (archive) {
     return (
       <Layout seo={{...post?.seo}}>
-        <div className="container">
-          <section>
-            {!posts || !posts.length ? (
-              <p>No posts found.</p>
-            ) : (
-              posts.map((post, index) => (
-                <article key={index}>
-                  <Link href={post.uri}>
-                    <a>
-                      <h1 dangerouslySetInnerHTML={{__html: post?.title}} />
-                    </a>
-                  </Link>
-                  <div dangerouslySetInnerHTML={{__html: post?.excerpt}} />
-                </article>
-              ))
-            )}
-            {/* TODO: replace this with a component. */}
-            <button onClick={loadPosts} disabled={!pagination.hasNextPage}>
-              Load more
-            </button>
-          </section>
-        </div>
+        <section className="container py-20">
+          {!posts || !posts.length ? (
+            <p>No posts found.</p>
+          ) : (
+            <div className="w-1/3 grid grid-cols-1 gap-12">
+              {posts.map((post, index) => (
+                <Card
+                  key={index}
+                  title={post?.title}
+                  url={post?.uri}
+                  body={post?.excerpt}
+                />
+              ))}
+            </div>
+          )}
+          <Button
+            onClick={() => loadPosts}
+            text="Load More"
+            type="secondary"
+            disabled={!pagination.hasNextPage}
+          />
+        </section>
       </Layout>
     )
   }