blog detail

4 files changed, 98 insertions, 52 deletions

diff --git a/src/pages/about-us.jsx b/src/pages/about-us.jsx
index 9bc67673..9c9c8baf 100644
--- a/src/pages/about-us.jsx
+++ b/src/pages/about-us.jsx
@@ -4,7 +4,9 @@ import PageContent from '@/lib/content/components/PageContent'
 export default function AboutUs() {
   return (
     <BasicLayout>
-      <PageContent path='/about-us' />
+      <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+        <PageContent path='/about-us' />
+      </div>
     </BasicLayout>
   )
 }
diff --git a/src/pages/blog/[slug].jsx b/src/pages/blog/[slug].jsx
index e69de29b..63e53bf0 100644
--- a/src/pages/blog/[slug].jsx
+++ b/src/pages/blog/[slug].jsx
@@ -0,0 +1,54 @@
+import Link from '@/core/components/elements/Link/Link'
+import BasicLayout from '@/core/components/layouts/BasicLayout'
+import { createSlug, getIdFromSlug } from '@/core/utils/slug'
+import useBlog from '@/lib/blog/hooks/useBlog'
+import { useRouter } from 'next/router'
+
+export default function BlogDetail() {
+  const router = useRouter()
+  const { slug = '' } = router.query
+  const id = getIdFromSlug(slug)
+  const { blog } = useBlog({ id })
+
+  const parsedContent = blog.data?.content?.replaceAll(
+    'src="/web/image',
+    `src="${process.env.NEXT_PUBLIC_ODOO_HOST}/web/image`
+  )
+
+  const contentClassNames = ` 
+      prose 
+      prose-gray 
+      prose-a:text-red_r-10 
+      prose-a:no-underline
+      prose-p:my-4
+      prose-headings:mt-6
+      prose-headings:mb-3
+      prose-headings:font-medium
+      prose-h1:text-title-sm
+      prose-h2:text-h-md
+      prose-img:my-0 
+      prose-img:mb-1 
+      prose-img:inline-block
+      prose-hr:my-3
+      max-w-none
+    `
+
+  return (
+    <BasicLayout>
+      <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
+        <h1 className='text-title-sm md:text-title-md font-semibold mb-2 leading-10'>
+          {blog.data?.title}
+        </h1>
+        <h2 className='leading-6 text-gray_r-12/90 mb-8'>
+          Diposting pada tanggal {blog.data?.postDate}{' '}
+          {blog.data?.category?.id && `di ${blog.data?.category?.name}`}
+        </h2>
+
+        <article
+          className={contentClassNames}
+          dangerouslySetInnerHTML={{ __html: parsedContent }}
+        />
+      </div>
+    </BasicLayout>
+  )
+}
diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
index c755ec82..041fc046 100644
--- a/src/pages/blog/index.jsx
+++ b/src/pages/blog/index.jsx
@@ -1,74 +1,64 @@
 import BasicLayout from '@/core/components/layouts/BasicLayout'
-import { Card, Spinner } from 'flowbite-react'
 import Link from 'next/link'
-import { useCallback, useEffect, useState } from 'react'
 import { createSlug } from '@/core/utils/slug'
-import useDevice from '@/core/hooks/useDevice'
-import Image from 'next/image'
-import odooApi from '@/core/api/odooApi'
+import Image from '@/core/components/elements/Image/Image'
+import useBlogs from '@/lib/blog/hooks/useBlogs'
+import { useRouter } from 'next/router'
+import Pagination from '@/core/components/elements/Pagination/Pagination'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
 
 export default function Blogs() {
-  const [isLoading, setIsLoading] = useState(true)
-  const [blogsValues, setBlogs] = useState([])
-  const { isMobile } = useDevice()
+  const router = useRouter()
+  const limit = 16
 
-  const getBlogs = useCallback(async () => {
-    // setIsLoading(true)
-    const result = await odooApi('GET', '/api/v1/blog')
-    setBlogs(result.blogs)
-    setIsLoading(false)
-  }, [])
+  const { page = 1 } = router.query
+  const { blogs } = useBlogs({ limit, offset: limit * (page - 1) })
 
-  useEffect(() => {
-    getBlogs()
-  }, [getBlogs])
+  const pageCount = Math.ceil(blogs?.data?.blogTotal / limit)
 
-  if (isLoading) {
-    return (
-      <>
-        <BasicLayout>
-          <div className='container mx-auto flex justify-center my-4'>
-            <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12 md:w-20 md:mt-28' />
-          </div>
-        </BasicLayout>
-      </>
-    )
-  }
   return (
     <BasicLayout>
-      <div className='container mx-auto p-4 md:p-0 mt-0 md:mt-10 mb-3'>
-        <div>
-          <h1 className='font-bold text-2xl'>Blog Indoteknik</h1>
-        </div>
-        <div className='grid grid-cols-2 gap-4 mt-4 md:grid-cols-4 !overflow-x-hidden'>
-          {blogsValues?.map((blog, index) => {
+      <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>
+        )}
+
+        <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}>
-                <Image
-                  src={blog.thumbnail}
-                  alt={blog.title}
-                  width={512}
-                  height={512}
-                  className='w-full h-[112px] object-cover object-center'
-                />
-                <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5 flex flex-col'>
-                  <Link href='#' className='mb-1 font-normal text-red_r-11'>
-                    {blog.category.name}
-                  </Link>
+                <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='#'
-                    className='mb-2 !text-gray_r-12 text-body-1 font-semibold leading-6 line-clamp-2'
+                    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>
-                  <p className='font-normal text-gray-700 dark:text-gray-400 mt-auto'>
-                    {blog.postDate}
-                  </p>
+                  <div className='text-caption-1'>{blog.postDate}</div>
                 </div>
               </div>
             )
           })}
         </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 c7248da1..c2348091 100644
--- a/src/pages/video.jsx
+++ b/src/pages/video.jsx
@@ -47,7 +47,7 @@ export default function Video() {
           currentPage={parseInt(page)}
           pageCount={pageCount}
           url={`/video`}
-          className='mt-10'
+          className='mt-4 md:mt-10'
         />
       </div>
     </BasicLayout>