blob: c755ec823e4a4b4b6494f617a42cd961e1d4bd03 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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>
)
}
|
