blob: 174469350ecc7bf222fa5fb6cb045b83efd58bea (
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 Link from 'next/link'
import { useRouter } from 'next/router'
import { createSlug } from '@/core/utils/slug'
import useBlogs from '@/lib/blog/hooks/useBlogs'
import Seo from '@/core/components/Seo'
import dynamic from 'next/dynamic'
const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
const Pagination = dynamic(() => import('@/core/components/elements/Pagination/Pagination'))
const Spinner = dynamic(() => import('@/core/components/elements/Spinner/Spinner'))
const Image = dynamic(() => import('@/core/components/elements/Image/Image'))
export default function Blogs() {
const router = useRouter()
const limit = 12
const { page = 1 } = router.query
const { blogs } = useBlogs({ limit, offset: limit * (page - 1) })
const pageCount = Math.ceil(blogs?.data?.blogTotal / limit)
return (
<BasicLayout>
<Seo title='Blogs Indoteknik.com' />
{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}
</Link>
<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>
)
}
|
