From e691500e47c7a328be1343daf30839b302af974a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 29 Mar 2023 14:44:01 +0700
Subject: fix

---
 src/pages/blog/index.jsx | 79 +++++++++++++++++++++++++-----------------------
 src/pages/video.jsx      | 77 +++++++++++++++++++++++++---------------------
 2 files changed, 85 insertions(+), 71 deletions(-)

(limited to 'src')

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>
   )
 }
diff --git a/src/pages/video.jsx b/src/pages/video.jsx
index c2348091..88f460a2 100644
--- a/src/pages/video.jsx
+++ b/src/pages/video.jsx
@@ -1,4 +1,5 @@
 import Pagination from '@/core/components/elements/Pagination/Pagination'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
 import BasicLayout from '@/core/components/layouts/BasicLayout'
 import useVideo from '@/lib/video/hooks/useVideo'
 import { useRouter } from 'next/router'
@@ -14,42 +15,50 @@ export default function Video() {
 
   return (
     <BasicLayout>
-      <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'>Kanal Video Indoteknik</h1>
-        <div className='grid grid-cols-1 md:grid-cols-4 gap-6'>
-          {video.data?.videos?.map((video) => (
-            <div className='shadow bg-white rounded' key={video.id}>
-              <iframe
-                src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)[1]}`}
-                title='YouTube video player'
-                allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
-                allowFullScreen={true}
-                width='100%'
-                height={200}
-                className='rounded'
-              />
-              <div className='p-3'>
-                <a
-                  href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
-                  className='text-red_r-11 mb-2 block'
-                >
-                  {video.channelName}
-                </a>
-                <a href={video.url} className='font-medium leading-6'>
-                  {video.name}
-                </a>
-              </div>
-            </div>
-          ))}
+      {video.isLoading && (
+        <div className='flex justify-center my-6'>
+          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
         </div>
+      )}
+
+      {video.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'>Kanal Video Indoteknik</h1>
+          <div className='grid grid-cols-1 md:grid-cols-4 gap-6'>
+            {video.data?.videos?.map((video) => (
+              <div className='shadow bg-white rounded' key={video.id}>
+                <iframe
+                  src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)[1]}`}
+                  title='YouTube video player'
+                  allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                  allowFullScreen={true}
+                  width='100%'
+                  height={200}
+                  className='rounded'
+                />
+                <div className='p-3'>
+                  <a
+                    href='https://www.youtube.com/@indoteknikb2bindustriale-c778'
+                    className='text-red_r-11 mb-2 block'
+                  >
+                    {video.channelName}
+                  </a>
+                  <a href={video.url} className='font-medium leading-6'>
+                    {video.name}
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
 
-        <Pagination
-          currentPage={parseInt(page)}
-          pageCount={pageCount}
-          url={`/video`}
-          className='mt-4 md:mt-10'
-        />
-      </div>
+          <Pagination
+            currentPage={parseInt(page)}
+            pageCount={pageCount}
+            url={`/video`}
+            className='mt-4 md:mt-10'
+          />
+        </div>
+      )}
     </BasicLayout>
   )
 }
-- 
cgit v1.2.3