Add posts

Author: imranhsayed

pages/blog/index.js

@@ -1,17 +1,23 @@
-import Layout from '../../src/components/layout';
-// import { PER_PAGE_FIRST, totalPagesCount } from '../../src/utils/pagination';
-// import Pagination from '../../src/components/blog/pagination';
-// import Posts from '../../src/components/blog/posts';
+/**
+ * External Dependencies.
+ */
 import axios from 'axios';
-import { GET_POSTS_ENDPOINT, HEADER_FOOTER_ENDPOINT } from '../../src/utils/constants/endpoints';
+
+/**
+ * Internal Dependencies.
+ */
+import Layout from '../../src/components/layout';
+import { HEADER_FOOTER_ENDPOINT } from '../../src/utils/constants/endpoints';
 import { getPosts } from '../../src/utils/blog';
+import Posts from '../../src/components/posts';
 
-const Blog = ( { headerFooter } ) => {
-	// const pagesCount = totalPagesCount( data?.posts?.pageInfo?.offsetPagination?.total ?? 0 );
+const Blog = ( { headerFooter, postsData } ) => {
+	console.log( 'postsData', postsData );
 	return (
 		<Layout headerFooter={ headerFooter || {} } seo={null}>
-			{/*<Posts posts={data?.posts?.edges ?? []}/>*/}
-			{/*<Pagination pagesCount={pagesCount} postName="blog" />*/}
+			<h1>Blog</h1>
+			<Posts posts={postsData?.posts_data ?? []}/>
+			{/*<Pagination pagesCount={postsData?.page_count} postName="blog" />*/}
 		</Layout>
 	);
 };

src/components/layout/header/index.js

@@ -52,6 +52,9 @@ const Header = ( { header } ) => {
 										   dangerouslySetInnerHTML={ { __html: menuItem.title } }/>
 									</Link>
 								) ) : null }
+								<Link href="/blog">
+									<a className="block mt-4 lg:inline-block lg:mt-0 hover:text-brand-royal-blue duration-500 mr-10">Blog</a>
+								</Link>
 							</div>
 							<div className="text-sm font-medium">
 								<a href="#responsive-header"

src/components/posts/index.js

@@ -0,0 +1,45 @@
+/**
+ * External Dependencies.
+ */
+import PropTypes from 'prop-types';
+import { isEmpty, isArray } from 'lodash';
+
+/**
+ * Internal Dependency.
+ */
+import Post from './post';
+
+
+const Posts = ( { posts } ) => {
+	
+	if ( isEmpty( posts ) && ! isArray( posts ) ) {
+		return null;
+	}
+	
+	return (
+		<div className="flex flex-wrap -mb-4">
+			{
+				posts.map( ( post, index ) => {
+					return (
+						<div
+							key={ `${ post?.id ?? '' }-${ index }` ?? '' }
+							className="w-full md:w-1/2 lg:w-1/3 mb-4 px-2"
+						>
+							<Post post={ post }/>
+						</div>
+					);
+				} )
+			}
+		</div>
+	);
+};
+
+Posts.propTypes = {
+	posts: PropTypes.array,
+};
+
+Posts.defaultProps = {
+	posts: [],
+};
+
+export default Posts;

src/components/posts/post.js

@@ -0,0 +1,29 @@
+import Link from 'next/link';
+import Image from '../image';
+import { sanitize } from '../../utils/miscellaneous';
+
+const Post = ( {post} ) => {
+	
+	return (
+		<div className="mb-8">
+			<figure className="overflow-hidden mb-4">
+				<Image
+					sourceUrl={ post?.attachment_image?.img_src ?? '' }
+					title={ post?.title ?? '' }
+					width="400"
+					height="225"
+					layout="fill"
+					containerClassNames="w-96 sm:-w-600px md:w-400px h-56 sm:h-338px md:h-225px"
+				/>
+			</figure>
+			<Link href={`/blog/${post?.slug}/`}>
+				<a>
+					<h2 className="font-bold mb-3 text-lg hover:text-blue-500" dangerouslySetInnerHTML={{__html: sanitize( post?.title ?? '' )}}/>
+				</a>
+			</Link>
+			<div dangerouslySetInnerHTML={{__html: sanitize( post?.excerpt ?? '' )}}/>
+		</div>
+	);
+};
+
+export default Post;