From 035eb95723c121426c1ccdfa4b3f729d0461c455 Mon Sep 17 00:00:00 2001
From: Ariful Alam <swazan.arif@gmail.com>
Date: Sun, 24 Apr 2022 14:16:49 +0600
Subject: [PATCH] Display empty blog state

---
 src/components/blog/index.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/blog/index.jsx b/src/components/blog/index.jsx
index a6ace04..04586a2 100644
--- a/src/components/blog/index.jsx
+++ b/src/components/blog/index.jsx
@@ -3,6 +3,7 @@ import { Fragment, useEffect, useState } from 'react';
 import { ga, skeleton } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 import PropTypes from 'prop-types';
+import { AiOutlineContainer } from 'react-icons/ai';
 import { getDevPost, getMediumPost } from '@arifszn/blog-js';
 
 const displaySection = (blog) => {
@@ -98,8 +99,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
   };
 
   const renderArticles = () => {
-    return (
-      articles &&
+    return articles && articles.length ? (
       articles.slice(0, blog.limit).map((article, index) => (
         <a
           className="card shadow-lg compact bg-base-100 cursor-pointer"
@@ -169,6 +169,11 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
           </div>
         </a>
       ))
+    ) : (
+      <div className="text-center mb-6">
+        <AiOutlineContainer className="mx-auto h-12 w-12 opacity-30" />
+        <p className="mt-1 text-sm opacity-50">No recent post</p>
+      </div>
     );
   };