blog

3 files changed, 76 insertions, 1 deletions

diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index 7e66a234..e06b327a 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -104,7 +104,7 @@ const NavbarDesktop = () => {
               Ready Stock
             </Link>
             <Link
-              href='/'
+              href='/blog'
               className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 bg-gray_r-2 hover:bg-gray_r-4 border border-gray_r-6 idt-transition'
             >
               Blog Indoteknik
diff --git a/src/pages/blog/[slug].jsx b/src/pages/blog/[slug].jsx
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/pages/blog/[slug].jsx
diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
new file mode 100644
index 00000000..c755ec82
--- /dev/null
+++ b/src/pages/blog/index.jsx
@@ -0,0 +1,75 @@
+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'
+
+export default function Blogs() {
+  const [isLoading, setIsLoading] = useState(true)
+  const [blogsValues, setBlogs] = useState([])
+  const { isMobile } = useDevice()
+
+  const getBlogs = useCallback(async () => {
+    // setIsLoading(true)
+    const result = await odooApi('GET', '/api/v1/blog')
+    setBlogs(result.blogs)
+    setIsLoading(false)
+  }, [])
+
+  useEffect(() => {
+    getBlogs()
+  }, [getBlogs])
+
+  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) => {
+            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='#'
+                    className='mb-2 !text-gray_r-12 text-body-1 font-semibold 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>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </BasicLayout>
+  )
+}