fix

1 files changed, 42 insertions, 37 deletions

diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
index 041fc046..757b2b16 100644
--- a/src/pages/blog/index.jsx
+++ b/src/pages/blog/index.jsx
@@ -18,48 +18,53 @@ export default function Blogs() {
 
   return (
     <BasicLayout>
-      <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
-        <h1 className='font-bold text-2xl mb-6'>Blog Indoteknik</h1>
+      {blogs.isLoading && (
+        <div className='flex justify-center my-6'>
+          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+        </div>
+      )}
 
-        {blogs.isLoading && (
-          <div className='flex justify-center my-6'>
-            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-          </div>
-        )}
+      {blogs.isFetched && (
+        <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+          <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Blog Indoteknik</h1>
 
-        <div className='grid gap-6 grid-cols-1 md:grid-cols-4'>
-          {blogs.data?.blogs?.map((blog, index) => {
-            return (
-              <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white' key={index}>
-                <Link href={createSlug('blog/', blog.title, blog.id)}>
-                  <Image
-                    src={blog.thumbnail}
-                    alt={blog.title}
-                    className='w-full h-[112px] object-cover object-center'
-                  />
-                </Link>
-                <div className='p-3 text-gray_r-12/80'>
-                  <div className='mb-1'>{blog.category.name}</div>
-                  <Link
-                    href={createSlug('blog/', blog.title, blog.id)}
-                    className='mb-3 !text-gray_r-12/90 text-body-1 font-medium leading-6 line-clamp-2'
-                  >
-                    {blog.title}
+          <div className='grid gap-6 grid-cols-1 md:grid-cols-4'>
+            {blogs.data?.blogs?.map((blog, index) => {
+              return (
+                <div
+                  className='rounded shadow-sm border border-gray_r-4 h-full bg-white'
+                  key={index}
+                >
+                  <Link href={createSlug('blog/', blog.title, blog.id)}>
+                    <Image
+                      src={blog.thumbnail}
+                      alt={blog.title}
+                      className='w-full h-[112px] object-cover object-center'
+                    />
                   </Link>
-                  <div className='text-caption-1'>{blog.postDate}</div>
+                  <div className='p-3 text-gray_r-12/80'>
+                    <div className='mb-1'>{blog.category.name}</div>
+                    <Link
+                      href={createSlug('blog/', blog.title, blog.id)}
+                      className='mb-3 !text-gray_r-12/90 text-body-1 font-medium leading-6 line-clamp-2'
+                    >
+                      {blog.title}
+                    </Link>
+                    <div className='text-caption-1'>{blog.postDate}</div>
+                  </div>
                 </div>
-              </div>
-            )
-          })}
-        </div>
+              )
+            })}
+          </div>
 
-        <Pagination
-          currentPage={parseInt(page)}
-          pageCount={pageCount}
-          url={`/blog`}
-          className='mt-4 md:mt-10'
-        />
-      </div>
+          <Pagination
+            currentPage={parseInt(page)}
+            pageCount={pageCount}
+            url={`/blog`}
+            className='mt-4 md:mt-10'
+          />
+        </div>
+      )}
     </BasicLayout>
   )
 }